<template>
  <div class="otherProjects-container">
    <div class="otherProjects-cont">
      <div class="left">
        <div class="left-side-menu">
          <project-side-menu :menuTree="menuTreeList" :menuOptions="menuOptions" :unique-opened="false" :default-active="defaultActive" @select="select">
            <template slot="其他费-1">
              <img src="@/assets/images/projectCostLedger/icon_cost_detail_5.svg" alt="">
              <div class="project-sub-menu-title-text">其他费</div>
            </template>
          </project-side-menu>
        </div>
      </div>
      <div class="right-table">
        <div class="table-item" v-if="defaultActive ==='费用汇总'">
          <tables
            v-if="!isSkeleton"
            :tableLoading="tableLoading"
            :tableData="tableData"
            :forData="forData"
            :MaxPage=500
            :tableDataTotal="tableDataTotal"
            :queryParams="queryParams"
            @handle-current-change="handleCurrentChange"
            @sort-change="sortChange"
          >
            <template slot="number" slot-scope="scope">
              <div>{{scope.row.number || '--'}}</div>
            </template>
            <template slot="proportion" slot-scope="scope">
              <div>{{scope.row.proportion || '--'}}</div>
            </template>
          </tables>
        </div>
        <div class="table-item" v-else>
          <tables
            v-if="!isSkeleton"
            :tableLoading="tableLoading"
            :tableData="tableData1"
            :forData="forData1"
            :MaxPage=500
            :tableDataTotal="tableDataTotal1"
            :queryParams="queryParams"
            @handle-current-change="handleCurrentChange"
            @sort-change="sortChange"
          >
            <template slot="number" slot-scope="scope">
              <div>{{scope.row.number || '--'}}</div>
            </template>
            <template slot="proportion" slot-scope="scope">
              <div>{{scope.row.proportion || '--'}}</div>
            </template>
          </tables>
        </div>
      </div>
    </div>

    <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="tableData1"
            default-expand-all
            border
            highlight-current-row
          >
            <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="cbkm"></el-table-column>
            <el-table-column label="物料验收系统本月用料" width="195" prop="wlyl"></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="dialogVisible=false">取消</el-button>
        <el-button type="primary">保存结果</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import Tables from "../../../../component/Tables"
  import ProjectSideMenu from "@/views/projectCostLedger/detail/components/ProjectSideMenu";
  import { getProjectOtherMenuTreeApi,getProjectOtherStatistics,getProjectOtherList } from "@/api/projectCostLedger";
export default {
  name: "directCost",
  components: {
    Tables,ProjectSideMenu
  },
  props: {
    // 项目ID
    // projectId: {
    //   type: String,
    //   required: true,
    //   default: ""
    // },
    // 详情信息
    projectDetailInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      comProjectId:'',
      isSkeleton:false,
      tableLoading:false,
      tableData:[],
      tableDataTotal:0,
      forData: [
        {label: '其他项目费用', prop: 'expenseName'},
        {label: '数量', prop: 'expenseValue'},
        {label: '占比', prop: 'proportion', slot: true},
      ],
      forData1: [
        {label: '清单内容', prop: 'itemContent',minWidth:'220'},
        {label: '工作内容、做法/规格型号/施工现场配置说明', prop: 'workContent',minWidth:'302'},
        {label: '单位', prop: 'unit',minWidth:'115'},
        {label: '不含税单价', prop: 'unitPriceExcludingTax',minWidth:'115'},
        {label: '不含税合价', prop: 'totalPriceExcludeTax',minWidth:'115'},
        {label: '税率（%）', prop: 'taxRate',minWidth:'115'},
        {label: '含税合价', prop: 'totalPriceIncludingTax',minWidth:'115'},
        {label: '税金（元）', prop: 'taxAmount',minWidth:'115'},
        {label: '成本科目', prop: 'costSubject',minWidth:'160'},
        {label: '税金类型', prop: 'taxType',minWidth:'115'},
        {label: '备注', prop: 'remarks',minWidth:'200'},
      ],
      queryParams:{
        pageNum:1,
        pageSize:10,
      },
      defaultActive: "费用汇总",
      menuTreeList: [
        {
          id: "1",
          itemContent:"其他费",
          children: []
        }
      ],
      menuOptions: {
        nodeName: "itemContent",
        nodeValue: "itemContent",
      },
      dialogVisible:false,
      currentList: "type1",
      toggleTabs:[
        {
          value: "type1",
          name: "长度",
        },
        {
          value: "type2",
          name: "面积",
        },
        {
          value: "type3",
          name: "体积",
        },
        // {
        //   value: "type4",
        //   name: "质量",
        // },
        // {
        //   value: "type5",
        //   name: "密度",
        // },
      ],
      tableData1:[],
      tableDataTotal1:0,
      type1:'',
      type2:'',
      typeList:[
        {
          dictLabel:'千米',
          dictValue:'千米'
        },
        {
          dictLabel:'米',
          dictValue:'米'
        },
        {
          dictLabel:'分米',
          dictValue:'分米'
        },
        {
          dictLabel:'厘米',
          dictValue:'厘米'
        },
        {
          dictLabel:'毫米',
          dictValue:'毫米'
        },
        {
          dictLabel:'微米',
          dictValue:'微米'
        },
      ],
    };
  },
  watch: {
    projectDetailInfo: {
      handler(newValue) {
        this.comProjectDetailInfo = newValue ? newValue : {};
        this.getProjectOtherStatistics(this.comProjectDetailInfo.projectId)
        // this.getProjectOtherStatistics('1762014527685136385')
        // this.init(this.comProjectDetailInfo);
      },
      deep: true,
      immediate: true
    },
    projectId: {
      handler(newValue) {
        this.comProjectId = newValue;
      },
      immediate: true
    }
  },
  //可访问data属性
  created() {
    this.getProjectOtherMenuTreeApi('1762014527685136385')

  },
  //计算集
  computed: {

  },
  //方法集
  methods: {
    async getProjectOtherStatistics(params) {
      try {
        const result = await getProjectOtherStatistics(params);
        if (result.code == 200) {
          const _dataArray = result.data;
          this.tableDataTotal=_dataArray.length;
          this.tableData = _dataArray;
        }
      } catch (error) {

      }
    },
    async getProjectOtherMenuTreeApi(params) {
      try {
        const result = await getProjectOtherMenuTreeApi(params);
        if (result.code == 200) {
          const _tempArray = result.data;

          _tempArray.unshift({id:"11",itemContent:"费用汇总"});
          this.menuTreeList[0].children = _tempArray;
        }
      } catch (error) {

      }
    },
    select(menuPath, menuPathArray){
      console.log(menuPath)
      console.log(menuPathArray)
      this.defaultActive=menuPath;
      let param = {
        projectId:this.comProjectDetailInfo.projectId,
        parentId:menuPathArray.originData.id
      }
      getProjectOtherList(param).then(res=>{
        this.tableData1 = res.data;
        this.tableDataTotal1=res.data.length;
      })
    },
    //分页
    handleCurrentChange(e){
      let params = this.formParams()
      params.pageNum = e
      this.queryParams.pageNum = e
      // this.handleQuery(params)
    },
    sortChange(){

    },
    handleClickTab(v){
      this.type1='';
      this.type2='';
      if(v.label === '长度'){
        this.typeList=[
          {
            dictLabel:'千米',
            dictValue:'千米'
          },
          {
            dictLabel:'米',
            dictValue:'米'
          },
          {
            dictLabel:'分米',
            dictValue:'分米'
          },
          {
            dictLabel:'厘米',
            dictValue:'厘米'
          },
          {
            dictLabel:'毫米',
            dictValue:'毫米'
          },
          {
            dictLabel:'微米',
            dictValue:'微米'
          },
        ]
      }
      if(v.label === '面积'){
        this.typeList=[
          {
            dictLabel:'平方千米',
            dictValue:'平方千米'
          },
          {
            dictLabel:'公顷',
            dictValue:'公顷'
          },
          {
            dictLabel:'公亩',
            dictValue:'公亩'
          },
          {
            dictLabel:'平方米',
            dictValue:'平方米'
          },
          {
            dictLabel:'平方分米',
            dictValue:'平方分米'
          },
          {
            dictLabel:'平方厘米',
            dictValue:'平方厘米'
          },
          {
            dictLabel:'平方毫米',
            dictValue:'平方毫米'
          },
        ]
      }
      if(v.label === '体积'){
        this.typeList=[
          {
            dictLabel:'立方千米',
            dictValue:'立方千米'
          },
          {
            dictLabel:'立方米',
            dictValue:'立方米'
          },
          {
            dictLabel:'立方分米',
            dictValue:'立方分米'
          },
          {
            dictLabel:'立方厘米',
            dictValue:'立方厘米'
          },
          {
            dictLabel:'立方毫米',
            dictValue:'立方毫米'
          },
          {
            dictLabel:'升',
            dictValue:'升'
          },
          {
            dictLabel:'分升',
            dictValue:'分升'
          },
          {
            dictLabel:'毫升',
            dictValue:'毫升'
          },
          {
            dictLabel:'微升',
            dictValue:'微升'
          },
          {
            dictLabel:'厘升',
            dictValue:'厘升'
          },
          {
            dictLabel:'公石',
            dictValue:'公石'
          },
        ]
      }
    },
  },
}
</script>
<style lang="scss" scoped>
  .otherProjects-container {
    width: 100%;
    box-sizing: border-box;
    background: #ffffff;
    height: 100%;
    align-items: center;
    .otherProjects-cont{
      display: flex;
      width: 100%;
      height: 100%;
    }
    .left{
      .left-side-menu {
        width: 220px;
        min-width: 220px;
        height: 100%;
      }
    }
    .right-table{
      width: calc(100% - 220px);
      padding: 16px;
    }
  }
  .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>
