<template>
  <el-dialog :visible.sync="dialogVisible" width="720px" append-to-body class="dialogVisible" title="单位换算">
    <el-tabs v-model="currentList" @tab-click="handleClickTab">
      <el-tab-pane
        :key="index"
        v-for="(item, index) in toggleTabs"
        :label="item.name"
        :name="item.value"
      >
        {{item.content}}
      </el-tab-pane>
      <div class="detail-cont-tab">
        <div class="select">
          <el-select v-model="type1" placeholder="请选择">
            <el-option v-for="(item,index) in typeList" :label="item.dictLabel" :value="item.dictValue" :key="index"></el-option>
          </el-select>
          <i class="el-icon-sort icon"></i>
          <el-select v-model="type2" placeholder="请选择">
            <el-option v-for="(item,index) in typeList" :label="item.dictLabel" :value="item.dictValue" :key="index"></el-option>
          </el-select>
        </div>
        <el-table
          :data="tableData"
          default-expand-all
          border
          highlight-current-row
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="50">
          </el-table-column>
          <el-table-column label="序号" width="50" align="left">
            <template slot-scope="scope">
              <span>{{scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column label="成本科目" width="190" prop="cbSubjectName"></el-table-column>
          <el-table-column label="物料验收系统本月用料" width="195">
            <template slot-scope="scope">
              <span v-if="scope.row.quantities">{{scope.row.quantities}} {{scope.row.quantitiesUnit}}</span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column label="换算后本月用料" prop="hsyl"></el-table-column>
        </el-table>
      </div>
    </el-tabs>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose()">取消</el-button>
      <el-button type="primary">保存结果</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: "unitConversion",
  props: {
    isVisible: {
      type: Boolean,
      default: false
    },
    dataList: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      dialogVisible:this.isVisible,
      currentList: "type1",
      toggleTabs:[
        {
          value: "type1",
          name: "长度",
        },
        {
          value: "type2",
          name: "面积",
        },
        {
          value: "type3",
          name: "重量",
        },
        {
          value: "type4",
          name: "体积",
        },
        // {
        //   value: "type4",
        //   name: "质量",
        // },
        // {
        //   value: "type5",
        //   name: "密度",
        // },
      ],
      type1:'',
      type2:'',
      typeList:[
        {
          dictLabel:'千米',
          dictValue:'km'
        },
        {
          dictLabel:'米',
          dictValue:'m'
        },
        {
          dictLabel:'分米',
          dictValue:'dm'
        },
        {
          dictLabel:'厘米',
          dictValue:'cm'
        },
        {
          dictLabel:'毫米',
          dictValue:'mm'
        },
        {
          dictLabel:'微米',
          dictValue:'μm'
        },
      ],
      tableData:this.dataList,
      tableList:[]
    };
  },
  //可访问data属性
  created() {
    console.log(this.dataList)
  },
  //计算集
  computed: {

  },
  //方法集
  methods: {
    handleClose () {
      this.$emit('refresh')
    },
    handleClickTab(v){
      this.type1='';
      this.type2='';
      if(v.label === '长度'){
        this.typeList=[
          {
            dictLabel:'千米',
            dictValue:'km'
          },
          {
            dictLabel:'米',
            dictValue:'m'
          },
          {
            dictLabel:'分米',
            dictValue:'dm'
          },
          {
            dictLabel:'厘米',
            dictValue:'cm'
          },
          {
            dictLabel:'毫米',
            dictValue:'mm'
          },
          {
            dictLabel:'微米',
            dictValue:'μm'
          },
        ]
      }
      if(v.label === '面积'){
        this.typeList=[
          {
            dictLabel:'平方千米',
            dictValue:'km²'
          },
          {
            dictLabel:'公顷',
            dictValue:'ha'
          },
          {
            dictLabel:'公亩',
            dictValue:'a'
          },
          {
            dictLabel:'平方米',
            dictValue:'m²'
          },
          {
            dictLabel:'平方分米',
            dictValue:'dm²'
          },
          {
            dictLabel:'平方厘米',
            dictValue:'cm²'
          },
          {
            dictLabel:'平方毫米',
            dictValue:'mm²'
          },
        ]
      }
      if(v.label === '体积'){
        this.typeList=[
          {
            dictLabel:'吨',
            dictValue:'T'
          },
          {
            dictLabel:'千克',
            dictValue:'kg'
          },
          {
            dictLabel:'克',
            dictValue:'g'
          },
        ]
      }
      if(v.label === '体积'){
        this.typeList=[
          {
            dictLabel:'立方千米',
            dictValue:'km³'
          },
          {
            dictLabel:'立方米',
            dictValue:'m³'
          },
          {
            dictLabel:'立方分米',
            dictValue:'dm³'
          },
          {
            dictLabel:'立方厘米',
            dictValue:'cm³'
          },
          {
            dictLabel:'立方毫米',
            dictValue:'mm³'
          },
          {
            dictLabel:'升',
            dictValue:'L'
          },
          {
            dictLabel:'分升',
            dictValue:'dL'
          },
          {
            dictLabel:'厘升',
            dictValue:'cL'
          },
          {
            dictLabel:'毫升',
            dictValue:'mL'
          },
          {
            dictLabel:'微升',
            dictValue:'μL'
          },
        ]
      }
    },
    handleSelectionChange(val) {
      console.log(val)
      this.tableList=val;
    }
  },
}
</script>
<style lang="scss" scoped>
  .dialogVisible{
    ::v-deep .el-dialog {
      position:absolute;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
      margin-top:0 !important;
      .el-dialog__body{
        flex:1;
        overflow: auto;
        padding:0;
        border-top: 1px solid #EEEEEE;
        border-bottom: 1px solid #EEEEEE;
        .select{
          margin-bottom: 16px;
        }
        .el-input{
          width: 316px !important;
        }
        .el-tabs__nav-wrap{
          padding: 0 16px;
        }
        .el-tabs__header{
          margin: 0;
        }
        .detail-cont-tab{
          padding: 24px 20px;
          .icon{
            transform: rotate(90deg);
            color:#0081FF;
            margin: 0 16px;
          }
        }
      }
      .el-dialog__footer{
        padding: 16px 20px;
      }
    }
  }
</style>
