<!-- 物料信息基础档案——详情 -->
<template>
  <el-card class="material-details">

    <el-row type="flex" justify="space-between">
      <el-col :span="6">
        <el-button size="small" @click="handleBack" :disabled="headerParam.isEdit">返回</el-button>
      </el-col>
      <el-col :span="6" style="text-align: right;">
        <!-- 附件管理 -->
        <el-button-group>
          <el-button size="small" icon="el-icon-paperclip" @click="handleFile"></el-button>
        </el-button-group>

        <!-- 切换 -->
        <el-button-group>
          <el-button size="small" icon="el-icon-d-arrow-left" :disabled="headerParam.isEdit"
            @click="handleChangePage('first')"></el-button>
          <el-button size="small" icon="el-icon-arrow-left" :disabled="headerParam.isEdit"
            @click="handleChangePage('pre')"></el-button>
          <el-button size="small" icon="el-icon-arrow-right" :disabled="headerParam.isEdit"
            @click="handleChangePage('next')"></el-button>
          <el-button size="small" icon="el-icon-d-arrow-right" :disabled="headerParam.isEdit"
            @click="handleChangePage('end')"></el-button>
        </el-button-group>
      </el-col>
    </el-row>

    <div class="md-content">
      <el-form :inline="true" label-position="right" :model="basicData.value">
      <!-- <el-form-item label="所属组织">
          <el-input v-model="basicData.value.orgName":readonly="!headerParam.isEdit" placeholder="所属组织"></el-input>
                                                                                                                                                                                                                      </el-form-item> -->
        <el-form-item label="物料编码">
          <el-input v-model="basicData.value.code" size="small" :readonly="!headerParam.isEdit"
            placeholder="物料编码"></el-input>
        </el-form-item>
        <el-form-item label="物料名称">
          <el-input v-model="basicData.value.name" size="small" :readonly="!headerParam.isEdit"
            placeholder="物料名称"></el-input>
        </el-form-item>
        <el-form-item label="英文名称">
          <el-input v-model="basicData.value.enName" size="small" :readonly="!headerParam.isEdit"
            placeholder="英文名称"></el-input>
        </el-form-item>
      <!-- <el-form-item label="版本号">
          <el-input v-model="basicData.value.version" :readonly="!headerParam.isEdit" placeholder="版本号"></el-input>
                                                                                                                                                                                                     </el-form-item> -->

      </el-form>

      <dr-tabs :tabList="detailsTabs" :handleTabClick="handleMainTabClick">
        <template #tabContent>

          <div class="md-basic">

            <!-- 主信息 -->
            <div class="md-main">

              <!-- 基本信息展示表单 -->
              <el-form v-if="activeMainTab == 'material'" :inline="true" label-position="right"
                :hide-required-asterisk="true" :model="basicData.value">

                <el-row :gutter="10">
                  <el-col :span="8" v-for="f in basicData.form" style="text-align: right;">
                    <template v-if="f.show">

                      <!-- 多选框 -->
                      <el-form-item v-if="f.attribute == 'checkbox'">
                        <el-checkbox :label="f.name" name="type" v-model="basicData.value[f.prop]"
                          :disabled="!(headerParam.isEdit && f.edit)">
                        </el-checkbox>
                      </el-form-item>

                      <!-- 下拉框 -->
                      <el-form-item v-else-if="f.attribute == 'select'" :label="f.name">

                        <el-select v-model="basicData.value[f.prop]" :placeholder="f.name"
                          :disabled="!(headerParam.isEdit && f.edit)">
                          <el-option v-for="d in f.dictValue" :key="d.dictValue" :label="d.dictLabel"
                            :value="d.dictValue">
                          </el-option>
                        </el-select>
                      </el-form-item>

                      <el-form-item v-else-if="f.attribute == 'image'" :label="f.name">
                        <el-image v-if="!(headerParam.isEdit && f.edit)" :src="basicData.value[f.prop]" fit="contain">
                        </el-image>

                      </el-form-item>

                      <!--attribute 文本 数字 文本域 为null -->
                      <el-form-item v-else :label="f.name">
                        <el-input size="small" v-model="basicData.value[f.prop]" :type="f.attribute || 'text'"
                          :readonly="!(headerParam.isEdit && f.edit)" :placeholder="f.name">
                        </el-input>
                      </el-form-item>
                    </template>
                  </el-col>
                </el-row>

              </el-form>

              <!-- 其他展示为列表 -->
              <el-table v-else :data="mainMsg.value" @cell-dblclick="handledbClick" class="material-table">
                <!-- <el-table-column type="selection" width="55" /> -->
                <el-table-column type="index" label="序号" width="55" align="center" />
                <el-table-column v-for="m in  mainMsg.form" v-if="m.show" :label="m.name" align="center" :prop="m.prop"
                  show-overflow-tooltip />
              </el-table>

            </div>

            <!-- 副信息 -->
            <div class="md-vice">

              <dr-tabs v-if="activeMainTab == 'material'" :tabList="basicMessage" :handleTabClick="handleViceTabClick">

                <template #tabContent>

                  <el-form v-if="activeViceTab == 'material_medcine'" :inline="true" label-position="right"
                    :hide-required-asterisk="true" :model="medcineData.value" class="md-vice-content">


                    <el-row :gutter="10">
                      <el-col :span="8" v-for="m in medcineData.form" style="text-align: right;">

                        <template v-if="m.show">

                          <!-- 多选框 -->
                          <el-form-item v-if="m.attribute == 'checkbox'">
                            <el-checkbox :label="m.name" name="type" v-model="medcineData.value[m.prop]"
                              :disabled="!(headerParam.isEdit && m.edit)">
                            </el-checkbox>
                          </el-form-item>

                          <!-- 下拉框 -->
                          <el-form-item v-else-if="m.attribute == 'select'" :label="m.name">

                            <el-select v-model="medcineData.value[m.prop]" :placeholder="m.name"
                              :disabled="!(headerParam.isEdit && m.edit)">
                              <el-option v-for="d in m.dictValue" :key="d.dictValue" :label="d.dictLabel"
                                :value="d.dictValue">
                              </el-option>
                            </el-select>
                          </el-form-item>

                          <!-- 图片 -->
                          <el-form-item v-else-if="m.attribute == 'image'" :label="m.name">
                            <el-image v-if="!(headerParam.isEdit && m.edit)" :src="medcineData.value[m.prop]"
                              fit="contain">
                            </el-image>
                          </el-form-item>

                          <!-- 文本、数字、textarae -->
                          <el-form-item v-else :label="m.name">
                            <el-input size="small" v-model="medcineData.value[m.prop]" :type="m.attribute || 'text'"
                              :readonly="!(headerParam.isEdit && m.edit)" :placeholder="m.name">
                            </el-input>
                          </el-form-item>
                        </template>

                      </el-col>
                    </el-row>


                  </el-form>

                  <!-- 其他展示为列表 -->
                  <el-table v-else :data="viceMsg.value" class="material-table">
                    <el-table-column type="index" label="序号" width="55" align="center" />
                    <el-table-column v-for="v in  viceMsg.form" v-if="v.show" :label="v.name" align="center"
                      :prop="v.prop" show-overflow-tooltip />
                  </el-table>
                </template>
              </dr-tabs>

              <!-- 其他展示为列表 -->
            <!-- <el-table v-else :data="viceMsg.value" class="material-table">
                 <el-table-column type="selection" width="55" /> 
                <el-table-column type="index" label="序号" width="55" align="center" />
                <el-table-column v-for="v in  viceMsg.form" v-if="v.show" :label="v.name" align="center" :prop="v.prop"
                  show-overflow-tooltip />
                                                               </el-table> -->
            </div>

            <!-- 基本信息 - 审计信息 -->
            <div class="md-auditInfo" v-if="activeMainTab == 'material'">
              <el-divider content-position="left">审计信息</el-divider>
              <el-form :inline="true" label-position="right" :model="basicData.value">
                <el-form-item label="创建人">
                  <el-input v-model="basicData.value.createBy" size="small" readonly placeholder="创建人"></el-input>
                </el-form-item>
                <el-form-item label="创建时间">
                  <el-input v-model="basicData.value.createTime" size="small" readonly placeholder="创建时间"></el-input>
                </el-form-item>
                <el-form-item label="最后修改人">
                  <el-input v-model="basicData.value.updateBy" size="small" readonly placeholder="最后修改人"></el-input>
                </el-form-item>
                <el-form-item label="最后修改时间">
                  <el-input v-model="basicData.value.updateTime" size="small" readonly placeholder="最后修改时间"></el-input>
                </el-form-item>

              </el-form>

            </div>

          </div>
        </template>
      </dr-tabs>

    </div>

  </el-card>
</template>

<script>
import drTabs from '../components/dr-tabs.vue';
import detailsTabs from '../config/detailsTabs';
import materialApi from '@/api/material/basic';
import { getDicts as getDicts } from '@/api/system/dict/data'

export default {
  name: 'material-details',
  props: ['headerParams'],
  // dicts: [''],
  data() {
    return {
      // 详情固定标签页
      detailsTabs,
      // 标签页当前激活状态
      activeMainTab: 'material',
      activeViceTab: 'material_medcine',
      headerParam: this.$props.headerParams,
      // 基本信息下的页签
      basicMessage: [
        {
          label: '医药行业',
          code: 'material_medcine',
          isShow: true,
        },
        {
          label: '辅计量管理',
          code: 'material_unit',
          isShow: true,
        },
        {
          label: '辅助属性',
          code: 'material_property',
          isShow: true,
        },
      ],
      // 基本信息
      basicData: {
        value: {},
        form: []
      },
      // 医药行业
      medcineData: {
        value: {},
        form: []
      },
      // 主标签信息
      mainMsg: {
        form: [],
        value: []
      },
      // 副信息
      viceMsg: {
        form: [],
        value: []
      },

    }
  },
  components: {
    drTabs

  },
  methods: {
    // 返回
    handleBack() {
      // this.$emit("actionBar", "materiaList")
      let bar = {
        address: 'materiaList',
        id: ''
      }
      this.$emit("actionBar", JSON.stringify(bar))

    },
    // 附件按钮
    handleFile() {
      console.log('附件按钮');
    },
    // 改变分页情况 
    handleChangePage(type) {
      switch (type) {
        case 'first':
          console.log('第一页');
          break;
        case 'pre':
          console.log('上一页');
          break;
        case 'next':
          console.log('下一页');
          break;
        case 'end':
          console.log('最后页');
          break;
      }
    },
    // 切换主信息标签
    handleMainTabClick(e) {

      this.activeMainTab = detailsTabs[e.index].code;

      this.$emit('headerOption', JSON.stringify({ activeMainTab: this.activeMainTab }))

      switch (this.activeMainTab) {

        // 基本信息
        case 'material':
          this.getTagList('material', (form) => {
            this.basicData.form = form;
            this.getMaterialDetails(this.headerParam.materialId, 'material');
          })
          break;
        // 财物信息
        case 'material_finance':
          this.getTagList('material_finance', (form) => {
            this.mainMsg.form = form;
            this.getFinanceList('');
          });
          break;
        // 利润中心信息
        case 'profit_center':
          this.getTagList('profit_center', (form) => {
            this.mainMsg.form = form;
            this.getCenterList('');
          });
          break;
        // 采购信息
        case 'material_purchase':
          this.getTagList('material_purchase', (form) => {
            this.mainMsg.form = form;
            this.getPurchaseList();
          });
          break;
        // 库存信息
        case 'material_inventory':
          this.getTagList('material_inventory', (form) => {
            this.mainMsg.form = form;
            this.getInventoryList();
          });
          break;
        // 计划信息
        case 'material_plan':
          this.getTagList('material_plan', (form) => {
            this.mainMsg.form = form;
            this.getPlanList('');
          });
          break;
        // 成本信息
        case 'material_cost':
          this.getTagList('material_cost', (form) => {
            this.mainMsg.form = form;
            this.getCostList('');
          });
          break;


        default:

          break;
      }

    },
    // 切换副表信息
    handleViceTabClick(e) {
      console.log(this.basicMessage[e.index], '切换标签');
      this.activeViceTab = this.basicMessage[e.index].code;

      switch (this.activeViceTab) {

        // 医药行业
        case 'material_medcine':
          this.getTagList('material_medcine', (form) => {
            this.medcineData.form = form;
            this.getMedcineDetails(this.headerParam.materialId, 'material_medcine');
          })
          break;
        // 辅计量管理
        case 'material_unit':
          this.getTagList('material_unit', (form) => {
            console.log(form, 'form');
            this.viceMsg.form = form;
          });
          break;
        // 辅助属性
        case 'material_property':
          this.getTagList('material_property', (form) => {

            this.viceMsg.form = form;
          });
          break;

        default:
          break;
      }
    },
    handledbClick() { },
    // 获取物料基本信息详细信息
    getMaterialDetails(id, templateCode) {
      materialApi.materialDetails(
        id,
        templateCode,
      ).then(res => {
        console.log(res, '物料基本信息');
        let { code, data } = res;
        if (code == 200) {
          this.basicData.value = data.data;
          // this.basicData.form = data.form;

        }
      })
    },

    // 查询财务信息列表
    getFinanceList(materialId) {
      materialApi.financeList({ materialId }).then(res => {
        console.log(res, '查询财务信息列表');
        if (res.code == 200) {
          this.mainMsg.value = res.rows;
        }
      })
    },
    // 查询计划信息列表
    getPlanList(materialId) {
      materialApi.planList({ materialId }).then(res => {
        console.log(res, '查询计划信息列表');
        if (res.code == 200) {
          this.mainMsg.value = res.data.tableBody.rows;
        }
      })
    },
    // 查询成本信息列表
    getCostList(materialId) {
      materialApi.costList({ materialId }).then((res) => {
        console.log(res, '成本信息列表+表头');
        if (res.code == 200) {
          this.mainMsg.value = res.data.tableBody.rows;
        }
      })
    },
    // 查询利润中心信息
    getCenterList(materialId) {
      materialApi.centerList({ materialId }).then(res => {
        console.log(res, '查询利润中心信息');
        if (res.code == 200) {
          this.mainMsg.value = res.data.tableBody.rows;
        }
      })
    },
    // 查询采购中心
    getPurchaseList(materialId) {
      materialApi.purchaseList({ materialId }).then(res => {
        console.log(res, '查询采购中心');
        if (res.code == 200) {
          this.mainMsg.value = res.data.tableBody.rows;
        }
      })
    },
    // 获取库存信息列表 
    getInventoryList(materialId) {
      materialApi.inventoryList({ materialId }).then(res => {
        console.log(res, '获取库存信息列表');
      })
    },

    /* 二级标签页 */
    // 获取医药行业信息详细信息+表单属性
    getMedcineDetails(id, templateCode) {

      console.log(id, templateCode);
      materialApi.medcineDetails(
        id,
        templateCode,
      ).then((res) => {

        console.log(res, '医药行业');
        let { code, data } = res;
        if (code == 200) {
          this.medcineData.value = data.data || {};
          // this.medcineData.form = data.form;
        }
      })
    },
    // 获取物料辅助属性详细信息+表单列段属性
    getPropertyDetails() {
      materialApi.propertyDetails().then(res => {
        console.log(res, '物料辅助属性详细信息');
      })
    },
    // 查询物料辅助属性列表+表头字段
    getPropertyList() {
      materialApi.propertyList().then(res => {
        console.log(res, '料辅助属性列表');
      })
    },
    //获取辅助计量单位基本信息+表单列段属性 
    getUnitDetails() {
      materialApi.unitDetails().then(res => {
        console.log(res, '辅助计量单位基本信息');
      })
    },
    //获取辅计量管理列表信息+表头字段
    getUnitList() {
      materialApi.unitList().then(res => {
        console.log(res, '辅计量管理列表信息');
      })
    },

    // 获取物料列表表头
    getTagList(templateCode, cb) {
      let _this = this
      materialApi.tagList({ templateCode }).then(res => {
        console.log(res, `获取${templateCode}表头`);
        let dictIdList = [];
        if (res.code == 200) {

          res.data.map(item => {

            if (item.dictId) {
              // 通过接口获取有dict的对应的数据
              getDicts(item.dictId).then(res => {
                if (res.data) {
                  item['dictValue'] = res.data;
                }
              })
            }
          })


          // 动态更改dict
          // res.data.forEach(item => {
          //   if (item.dictId) {
          //     // 请求接口
          //     dictIdList.push(item.dictId);
          //   }
          // })
          // console.log(dictIdList, 'dictIdList');
          // _this.dict = Array.from(new Set([..._this.dict, ...dictIdList]));

          // console.log(_this.dicts, 'dicts');

          return cb(res.data);
        }
      })
    },


  },
  created() {
    // 基本信息
    this.getTagList('material', (form) => {
      this.basicData.form = form;
      this.getMaterialDetails(this.headerParam.materialId, 'material');
    })
    // 医疗行业
    this.getTagList('material_medcine', (form) => {
      this.medcineData.form = form;
      this.getMedcineDetails(this.headerParam.materialId, 'material_medcine');
    })
  },

}
</script>

<style lang="scss">
.material-details {
  height: calc(100vh - 158px);
  box-sizing: border-box;

  .el-card__body {
    height: calc(100vh - 160px);
    box-sizing: border-box;
    padding: 12px;
  }

  .md-content {
    margin-top: 12px;
    height: calc(100vh - 260px);
    box-sizing: border-box;

    .md-basic {
      overflow: auto;

      .md-main {
        height: calc(100vh - 625px);
        // max-height: 290px;
        margin-bottom: 10px;
        overflow-y: auto;
        overflow-x: hidden;
      }

      .md-vice-content {
        height: 140px;
        overflow-y: auto;
        overflow-x: hidden;
      }
    }

    .md-auditInfo {

      .el-divider--horizontal {
        margin: 20px 0px 15px;
      }
    }

  }

}
</style>

<style scoped>
.md-content>>>.el-form-item {
  margin-bottom: 10px;
}

.md-content>>>.el-tabs--border-card>.el-tabs__content {
  padding-bottom: 8px;
}

.md-content .md-auditInfo>>>.el-form-item {
  margin-bottom: 0px;
}

.md-main>>>.el-form-item,
.md-vice>>>.el-form-item {
  width: 100%;
  box-sizing: border-box;
}

.md-main>>>.el-form-item__label,
.md-vice>>>.el-form-item__label {
  width: 40%;
}

.md-main>>>.el-form-item__content,
.md-vice>>>.el-form-item__content {
  width: 60%;
}

.md-content>>>.el-form-item__label {
  font-weight: normal;
  /* text-align: left;
  width: 28%; */
  white-space: nowrap;
  /* IE6 需要定义宽度 */
  overflow: hidden;

  -o-text-overflow: ellipsis;
  /* Opera */
  text-overflow: ellipsis;
  /* IE, Safari (WebKit) */
  /* -moz-binding: url('ellipsis.xml#ellipsis'); */
  /* Firefox */
}

.md-main>>>.material-table {
  height: 100%;
}

.md-vice>>>.material-table {
  height: 140px;
  overflow-y: auto;
  overflow-x: auto;
}
</style>