<!--
 * @Author: ysh
 * @Date: 2024-09-23 11:17:31
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-09-23 15:39:39
-->
<template>
  <div style="width:100%">
    <table class="table" border="1" style="width:100%">
      <!-- <tr>
        <td style="width:55px;">序号</td>
        <td>委外内容</td>
        <td style="width:50px;" v-if="taskName == '委外申请'">操作</td>
      </tr>
      <tr v-for="(work, index) in workList" :key="index">
        <td>
          {{ index + 1 }}
        </td>
        <td class="text-center">
          <el-descriptions :column="4" border size="mini">
            <el-descriptions-item label="工作内容" :span="4">
              <el-input type="textarea" v-model="work.content" :autosize="{ minRows: 2 }"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="等级或比例尺" :span="2">
              <el-select v-model="work.scale" placeholder="请选择" clearable style="width:100%">
                <el-option v-for="dict in dict.type.cmc_scale_grade" :key="dict.value" :label="dict.label"
                  :value="dict.label" />
              </el-select>
            </el-descriptions-item>
            <el-descriptions-item label="单位" :span="2">
              <el-select v-model="work.unit" placeholder="请选择" clearable style="width:100%">
                <el-option v-for="dict in dict.type.cmc_unit" :key="dict.value" :label="dict.label"
                  :value="dict.label" />
              </el-select>
            </el-descriptions-item>
            <el-descriptions-item label="工作量" :span="2">
              <el-input v-model="work.workload" clearable></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="要求完成时间" :span="2">
              <el-date-picker style="width:100%" v-model="work.deadline" value-format="yyyy-MM-dd" type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-descriptions-item>
            <el-descriptions-item label="备注" :span="4">
              <el-input v-model="work.remark" type="textarea" clearable :autosize="{ minRows: 4 }"></el-input>
            </el-descriptions-item>
          </el-descriptions>
        </td>
        <td v-if="taskName == '委外申请'">
          <div class="delete-btn" @click="deletWorkItem(index)">
            <i class="el-icon-circle-close"></i>
          </div>
        </td>
      </tr> -->
      <tr>
        <td style="width: 280px">工作内容</td>
        <td>等级或比例尺</td>
        <td>单位</td>
        <td>工作量</td>
        <td style="width: 100px">要求完成时间</td>
        <td>备注</td>
      </tr>
      <tr v-for="(work, index) in workList" :key="index">
        <td>
          <el-input v-model="work.content" type="textarea" clearable :autosize="{ minRows: 4, maxRows: 10 }" :disabled="taskName != '委外申请'"></el-input>
        </td>
        <td>
          <el-select v-model="work.scale" placeholder="请选择" 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="请选择" 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 v-model="work.workload" clearable :disabled="taskName != '委外申请'"></el-input>
        </td>
        <td>
          <el-date-picker style="width: 140px" 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, maxRows: 10 }" :disabled="taskName != '委外申请'"></el-input>
        </td>
        <td v-if="taskName == '委外申请'">
          <div class="delete-btn" @click="deletWorkItem(index)">
            <i class="el-icon-circle-close"></i>
          </div>
        </td>
      </tr>
    </table>
    <el-button icon="el-icon-plus" type="primary" plain size="mini" @click="addWorkList"></el-button>
  </div>
</template>

<script>
import { listOutsourceWork, getOutsourceWork, addOutsourceWork, updateOutsourceWork, delOutsourceWork } from "@/api/oa/outsource/outsourceWork";
export default {
  dicts: ['cmc_scale_grade', 'cmc_unit'],
  props: {
    taskForm: {
      type: Object,
    },
    taskName: {
      type: String,
      required: true
    },
    outsourceId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      workList: [
        {
          content: "",
          scale: "",
          unit: "",
          workload: "",
          deadline: undefined,
          remark: "",
        },
      ],
      formTotal: 0
    }
  },
  mounted() {
    this.initTable()
  },
  methods: {
    initTable() {
      if (!this.outsourceId) return
      listOutsourceWork({ pageNum: 1, pageSize: 100, outsourceId: this.outsourceId }).then(res => {
        if (res.rows.length > 0) {
          this.formTotal = 1;
          this.workList = res.rows;
        } else {
          this.workList = [{
            content: "",
            scale: "",
            unit: "",
            workload: "",
            deadline: undefined,
            remark: "",
          }]
        }
      });
    },
    addWorkList() {
      this.workList.push({
        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);
      }
    },
  },
}
</script>

<style lang="scss" scoped>
table {
  /*居中*/
  margin: 0 auto;
  /*边框*/
  /* border: 1px solid black; */
  text-align: center;
  border-collapse: collapse;
  /*设置背景颜色*/
  /* background-color: #bfa; */
}

.delete-btn {
  color: #F56C6C;
  cursor: pointer;

  i {
    font-size: 25px;
  }
}
</style>