<!--
 * @Author: ysh
 * @Date: 2024-08-29 15:21:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-05-28 15:15:13
-->
<template>
  <div style="width:100%">
    <table border="1" style="width:100%">
      <tr>
        <td :colspan="8" style="background-color: #f8f8f9;line-height:40px"><strong>表1：合同计划工作量</strong></td>
      </tr>
      <tr>
        <td style="width: 50px;">序号</td>
        <td style="min-width:250px">工作内容</td>
        <td style="width:150px">等级或比例尺</td>
        <td style="width:100px">单位</td>
        <td style="width:100px">工作量</td>
        <td style="width:150px">要求完成时间</td>
        <td>备注</td>
      </tr>
      <tr v-for="(work, index) in workList" :key="index">
        <td>
          {{ index + 1 }}
        </td>
        <td>
          <el-input v-model="work.content" type="textarea" clearable :autosize="{ minRows: 4 }"
            :disabled="taskName != '合同拟稿'"></el-input>
        </td>
        <td>
          <el-select v-model="work.scale" placeholder="请选择" filterable  clearable :disabled="taskName != '合同拟稿'">
            <el-option v-for="dict in dict.type.cmc_scale_grade" :key="dict.value" :label="dict.label"
              :value="dict.label" />
          </el-select>
        </td>
        <td>
          <el-select v-model="work.unit" placeholder="请选择" filterable  clearable :disabled="taskName != '合同拟稿'">
            <el-option v-for="dict in dict.type.cmc_unit" :key="dict.value" :label="dict.label" :value="dict.label" />
          </el-select>
        </td>
        <td>
          <el-input-number :controls="false" style="width:100%;" v-model="work.workload" clearable
            :disabled="taskName != '合同拟稿'"></el-input-number>
        </td>
        <td>
          <el-date-picker style="width: 100%" v-model="work.deadline" value-format="yyyy-MM-dd" type="date"
            placeholder="选择日期" :disabled="taskName != '合同拟稿'">
          </el-date-picker>
        </td>
        <td>
          <el-input v-model="work.remark" type="textarea" clearable :autosize="{ minRows: 4 }"
            :disabled="taskName != '合同拟稿'"></el-input>
        </td>
        <td v-show="taskName == '合同拟稿'">
          <div class="delete-btn" @click="deletWorkItem(index)">
            <i class="el-icon-circle-close"></i>
          </div>
        </td>
      </tr>
    </table>
    <el-button class="mb20" icon="el-icon-plus" size="mini" @click="addWorkList()" type="primary" plain
      :disabled="taskName != '合同拟稿'">
    </el-button>
  </div>
</template>

<script>
import { listContractWork, addContractWork, delContractWork } from "@/api/oa/contract/contractWork";
export default {
  dicts: ['cmc_scale_grade', 'cmc_unit'],
  props: {
    contractId: {
      type: String,
      default: ''
    },
    taskName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      workList: [{
        content: "",
        scale: "",
        unit: "",
        workload: "",
        deadline: undefined,
        remark: "",
      }],
    }
  },
  watch: {
    contractId() {
      this.initTable()
    },
    workList: {
      handler(newVal) {
        this.$emit('update:workList', newVal)
      },
      deep: true
    }
  },
  created() {
    this.initTable()
  },
  methods: {
    initTable() {
      if(!this.contractId) return
      listContractWork({ pageNum: 1, pageSize: 100, contractId: this.contractId }).then(res => {
        if (res.rows.length > 0)
          this.workList = res.rows;
        else{
          this.workList = [{
        content: "",
        scale: "",
        unit: "",
        workload: "",
        deadline: undefined,
        remark: "",
      }]
        }
      });
    },
    deletWorkItem(index) {
      let arr = this.workList;
      if (arr.length == 1) {
        return;
      }
      if (index >= 0 && index < arr.length) {
        arr.splice(index, 1);
      }
    },
    addWorkList() {
      this.workList.push({
        content: "",
        scale: "",
        unit: "",
        workload: "",
        deadline: undefined,
        remark: "",
      });
    },
  },
}
</script>

<style lang="scss" scoped>
.delete-btn {
  color: #F56C6C;
  cursor: pointer;

  i {
    font-size: 25px;
  }
}

table {
  /*边框*/
  /* border: 1px solid black; */
  text-align: center;
  border-collapse: collapse;
  border: 1px solid #a5abb0;

  /*设置背景颜色*/
  /* background-color: #bfa; */
  td {
    padding: 5px;
  }
}
</style>