<template>
  <div>
    <div flex>
    </div>
    <base-table ref="customtable" :border="true" :showIndex="true" :tabLoading.sync="tabLoading" :tableData="tableData"
      :tableColumn="tableColumn" :funData="[]" :indexOperate="true" @onCellClick="getCell" @onSelectionChange="getSelect"
      @radioChange="singleSelection" @newRow="add">
      <!--  单选  -->
      <template v-slot:option="{ row }">
        <el-radio v-model="radio" :label="row.$index" @click="radioChange"></el-radio>
      </template>
      <!-- 序号 -->
      <template v-slot:index="{ row }">
        <span>{{ row.$index + 1 }}</span>
      </template>

      <!--  部门  -->
      <template v-slot:organName="{ row }">
        <span style="width: 100%;">{{ row.organName }}</span>

        <!-- <el-input v-model="row.detail_organ" disabled placeholder="自动带入"> -->
        <!-- </el-input> -->
      </template>
      <!--  项目组成员  -->
      <template v-slot:personName="{ row }">
        <div flex @click="elDialogClick(row)">
          <p class="single" :style="{ color: row.personName ? '#000' : '#c0c4cc' }"
            style="width: 100%;cursor: pointer;font-size: 14px;">
            {{ row.personName ? row.personName : "请点击选择" }}
          </p>
          <i class="el-icon-more" style="margin-top: 6px;color: #c0c4cc"></i>
        </div>
      </template>
      <!--  电话  -->
      <template v-slot:moiblePhone="{ row }">
        <span style="width: 100%;">{{ row.moiblePhone }}</span>
      </template>
      <!--  进入时间  -->
      <template v-slot:enterDate="{ row }" style="text-align: right;">
        <el-date-picker v-model="row.enterDate" align="right" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
        </el-date-picker>
      </template>
      <!--  负责模块  -->
      <template v-slot:responsibleModule="{ row }">
        <el-input v-model="row.responsibleModule" clearable placeholder="请输入"></el-input>
      </template>
      <template v-slot:operate="{ row }">
        <el-tooltip class="item" effect="dark" content="删除当前行" placement="top">
          <i class="el-icon-delete" style="color: red; font-size: 16px; margin-right: 10px" @click="del(row)"></i>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="复制当前行" placement="top">
          <i class="el-icon-document-copy" style="color: #1f63ff; font-size: 16px" @click="duplicate(row)"></i>
        </el-tooltip>
      </template>
    </base-table>

    <base-radio-people ref="baseRadioPeople" @personConfirmClick="personConfirmClick"></base-radio-people>
    <base-quantity-person ref="baseQuantityPerson" @personConfirmClick="personConfirmClick"></base-quantity-person>
  </div>
</template>
<script>
import baseTable from "@/components/base/baseTable";
import basePage from "@/components/base/basePage";
import baseChoice from "@/components/base/baseChoice/index.vue";
import baseDialog from "@/components/base/BaseNewDialog/index.vue";
import configData from "./configData";
import { OrganGetStock, OrganDelContract, stockTree } from "@/api/apis/organization";
import baseRadioPeople from "@/components/base/baseRadioPeople/index.vue";
import baseQuantityPerson from '@/components/base/baseQuantityPerson'

import { projectList, projectDetailData, projectSaveData, projectDelData, projectProMemberDelData, projectProPhaseDelData } from "@/api/apis/projectManagement";

export default {
  name: "equipmentDetails",
  components: {
    baseTable,
    basePage,
    baseDialog,
    baseRadioPeople,
    baseChoice, baseQuantityPerson
  },
  data() {
    return {
      tableHeight: "70vh",
      optionIndex: "",
      tabLoading: false,
      loading: false,
      optionData: {},
      radio: false,
      inTime: '',
      tableData: [],
      tableColumn: [
        {
          label: "项目组成员",
          prop: "personName",
          tooltip: true,

        },
        {
          label: "部门",
          prop: "organName",
          tooltip: true,
        },
        {
          label: "联系电话",
          prop: "moiblePhone",
          tooltip: true,
        },
        {
          label: "进入时间",
          prop: "enterDate",
          tooltip: true,
        },
        {
          label: "负责模块",
          prop: "responsibleModule",
          tooltip: true,
        },
        {
          label: "操作",
          prop: "operate",
          width: "100",
          fixed: "right",
        },
      ],
      pageModel: {
        page: 1, //当前页码
        limit: 10, //每页显示多少
        Sequence: "", //排列方式
        SequenceName: "", //需要排列的字段名
      },
      isCustomMade: "",
      selectRow: {},
      itemTree: []
    };
  },
  watch: {
    tableData: {
      deep: true,
      handler(newVal, oldVal) {
        this.$emit("callBackInfo", newVal)
        // console.log(newVal, "newVal");
      }
    }
  },
  mounted() {
    this.initialization()
  },
  methods: {
    //计算table高度(动态设置table高度)
    getTableHeight() {
      let tableH = 180; //距离页面下方的高度
      let tableHeightDetil = window.innerHeight - tableH;
      if (tableHeightDetil <= 300) {
        this.windowHight = 300;
      } else {
        this.windowHight = window.innerHeight - tableH;
      }
    },
    getDateValue(row) {
      return row.enterDate ? row.enterDate : this.inTime
    },

    initialization() {
      var currentDate = new Date();
      var year = currentDate.getFullYear();
      var month = currentDate.getMonth() + 1;
      var day = currentDate.getDate();
      this.inTime = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
    },
    // 项目组成员点击事件
    async elDialogClick(row) {
      // this.$refs.baseRadioPeople.openDialog();
      this.$refs.baseQuantityPerson.openDialog()
      this.optionIndex = row.index;
    },
    // //单选中人员
    // personConfirmClick(el) {
    //   this.$set(this.tableData[this.optionIndex], "detail_member", el.p_PersonName);
    //   // this.$set(this.tableData[this.optionIndex], "detail_organ", el.o_OrganName);
    //   this.$set(this.tableData[this.optionIndex], "p_Telphone", el.p_Telphone);
    //   this.$set(this.tableData[this.optionIndex], "detail_memberId", el.p_PersonID);
    //   // console.log(" this.tableData", this.tableData);
    // },
    //弹窗批量获取所需人员
    personConfirmClick(arr) {
      for (let i = 0; i < arr.length == 1 ? 1 : arr.length - 1; i++) {
        if (arr.length > 1 && i < arr.length - 1) {
          this.add()
        }
        this.$set(this.tableData[this.optionIndex], "personName", arr[i].p_PersonName);
        this.$set(this.tableData[this.optionIndex], "organName", arr[i].o_OrganName);
        this.$set(this.tableData[this.optionIndex], "moiblePhone", arr[i].p_Telphone);
        this.$set(this.tableData[this.optionIndex], "personID", arr[i].p_PersonID);
        this.$set(this.tableData[this.optionIndex], "rowIndex", this.optionIndex);
        this.optionIndex = this.optionIndex + 1

      }
    },
    // 单元格点击事件
    getCell(row, label) {
      this.selectRow = row;
    },
    // 表格多选
    getSelect(selectTable) {
      this.selectTable = selectTable;
    },
    radioChange(val) {
      this.optionData = val;
      this.radio = val.index;
    },
    //添加
    add() {
      let arr = {
        personName: '',
        detail_organ: '',
        p_Telphone: "",
        responsibleModule: "",
        enterDate: this.inTime,
      };
      this.tableData.push(arr);
    },
    singleSelection(val) {
      this.choiceIndex = val.index;
    },
    async del(row) {
      this.$delConfirm().then(() => {
        if (row.mainID && this.$route.query.name == '项目编辑') {
          projectProMemberDelData({ id: row.detail_ID }).then(res => {
            if (res.success == "true") {
              this.$emit("renovate");
              this.$message({
                message: "删除成功",
                type: "success",
              });
              this.tableData.splice(row.index, 1);
              this.choiceIndex = "false";
              this.$emit('renew')
            }
          })
        } else {
          this.tableData.splice(row.index, 1);
        }
      })

    },


    duplicate(row) {
      let data = {
        ...row,
        detail_ID: null
      }
      this.tableData.push(JSON.parse(JSON.stringify(data)));
    },
    // 查询
    getTableList(data) {
      // console.log("查询");
      // this.xmTableData[0].P_PersonName='徐明泉'
    },
  },
};
</script>

<style>
.el-table th>.cell {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
<style>
.el-table th>.cell {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
<style scoped>
>>>.el-radio__label {
  /* display: none; */
}

>>>.el-table__body-wrapper {
  /* min-height: 300px !important; */
}

.iconButton {
  padding: 10px 12px;
  color: white;
  margin: 5px;
}

.iconButton.add {
  background-color: #409eff !important;
}

.iconButton.del {
  background-color: #f56c6c !important;
}

::v-deep .el-input--medium .el-input__inner {
  /* padding: 0 5px; */
}
</style>
