<template>
  <div style="height:100%">
    <ai-detail>
      <template #title>
        <ai-title
          :title="basicInfo.parentTaskCode ? '子任务详情' : '任务详情'"
          isShowBottomBorder
          isShowBack
          @onBackClick="onBack()"
        >
          <template #rightBtn v-if="detailType == 1">
            <el-button
              type="primary"
              icon="iconfont iconReject"
              v-if="basicInfo.status == 0"
              @click="closeWork()">关闭任务</el-button
            >
            <el-button
              type="primary"
              icon="iconfont iconCorrect"
              v-if="basicInfo.status == 0"
              @click="markCompleted('1')"
              >确认完成</el-button
            >
            <el-button
              icon="iconfont iconDelete"
              class="del-btn-list"
              v-if="basicInfo.status == 1 || basicInfo.status == 2"
              @click="deleteTask()"
              >删除任务</el-button
            >
          </template>
        </ai-title>
      </template>
      <template #content>
        <ai-card title="任务进度">
          <template #right v-if="basicInfo.parentTaskCode && detailType != 2 && detailType != 3">
            <el-button type="primary" @click="toParent()">查看父级任务</el-button>
          </template>
          <template slot="content">
            <ai-wrapper class="mar-t16" label-width="80px" :columnsNumber="2">
              <ai-info-item
                label="任务状态："
                :class="{
                  color1: basicInfo.status == 0,
                  color2: basicInfo.status == 1,
                  color3: basicInfo.status == 2,
                }"
                ><span>{{
                  dict.getLabel("workTaskStatus", basicInfo.status) || "-"
                }}</span></ai-info-item
              >
              <ai-info-item label="当前进度："
                ><span>{{ basicInfo.percent + "%" }}</span></ai-info-item
              >
            </ai-wrapper>
            <div class="echart" id="echart"></div>
          </template>
        </ai-card>
        <ai-card title="任务执行情况">
          <template slot="content">
            <el-row
              type="flex"
              justify="space-between"
              align="center"
              style="margin-bottom: 8px"
            >
              <el-col :span="16">
                <el-radio-group
                  v-model="ListType"
                  size="small"
                  @change="ListTypeChange"
                >
                  <el-radio-button label="userInfoList">执行人</el-radio-button>
                  <el-radio-button label="checkUserList">督办人</el-radio-button>
                  <el-radio-button label="sendUserList">抄送人</el-radio-button>
                </el-radio-group>
                <el-input
                  v-model="listName"
                  placeholder="姓名"
                  size="small"
                  style="width: 160px; margin-left: 8px"
                  @input="filterData"
                ></el-input>
              </el-col>
              <el-col
                :span="8"
                class="icon add-icon"
                v-if="basicInfo.status == 0"
              >
                <ai-wechat-selecter style="display: inline-block;"  v-if="ListType == 'userInfoList' && detailType == 1"
                :instance="instance"
                v-model="addUserList"
                :disable="appReportTaskDoInfoList"
                :isAdd="false"
                @change="confirmAdd(1)"
                >
                  <i
                    class="iconfont iconAdd"
                    style="color: #5088ff"
                    >添加执行人</i
                  >
                </ai-wechat-selecter>

                <ai-wechat-selecter style="display: inline-block;"  v-if="ListType == 'checkUserList' && detailType == 1"
                :instance="instance"
                :disable="appReportTaskDoInfoList"
                v-model="addUserList"
                :isAdd="false"
                @change="confirmAdd(2)"
                >
                  <i
                  class="iconfont iconAdd"
                  style="color: #5088ff"
                  >添加督办人</i
                >
                </ai-wechat-selecter>

                <ai-wechat-selecter style="display: inline-block;" v-if="ListType == 'sendUserList' && detailType == 1"
                :instance="instance"
                v-model="addUserList"
                :disable="appReportTaskDoInfoList"
                :isAdd="false"
                @change="confirmAdd(3)"
                >
                  <i
                  class="iconfont iconAdd"
                  style="color: #5088ff"
                  >添加抄送人</i
                  >
                </ai-wechat-selecter>

                <i
                  class="iconfont iconClock"
                  style="color: #5088ff; margin-left: 8px"
                  :style="isAll ? 'opacity:0.5' : ''"
                  v-if="ListType == 'userInfoList' && detailType != 3"
                  @click="urgeMessageAll()"
                  >一键催办</i
                >
              </el-col>
            </el-row>
            <ai-table :isShowPagination="false"
              class="ai-table"
              :tableData="basicInfo[ListType]"
              :col-configs="colConfigs"
              :dict="dict"
            >
              <el-table-column slot="status" label="任务状态" align="center" v-if="ListType == 'userInfoList'">
                <template slot-scope="{ row }">
                  <span >{{$dict.getLabel("workTaskStatus", row.doStatus)}}</span>
                </template>
              </el-table-column>
              <el-table-column slot="percent" label="完成时间" align="center" v-if="ListType == 'userInfoList'">
                <template slot-scope="{ row }">
                  <span >{{ row.finishTime|| '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column slot="percent" label="完成进度" align="center" v-if="ListType == 'userInfoList'">
                <template slot-scope="{ row }">
                  <span>{{ row.percent + '%'}}</span>
                </template>
              </el-table-column>
              <el-table-column
                slot="options"
                label="操作"
                align="center"
                fixed="right"
                width="200"
              >
                <template slot-scope="{ row }">
                  <div>
                    <i
                      class="iconfont iconClock icon-color89B"
                      title="催办"
                      :style="
                        row.doStatus == 0
                          ? row.isSend
                            ? 'opacity:0.5'
                            : ''
                          : 'opacity:0.5'
                      "
                      style="cursor: pointer"
                      v-if="ListType == 'userInfoList' && basicInfo.status == 0 && detailType != 3"
                      @click="urgeMessage(row)"
                    ></i>
                    <span
                      class="iconfont iconShow icon-color89B"
                      title="详情"
                      v-if="ListType == 'userInfoList'"
                      style="cursor: pointer; margin-left: 8px"
                      @click="getExecute(row)"
                    ></span>
                    <span
                      class="iconfont iconRevoke icon-color89B"
                      title="删除"
                      style="margin-left: 8px; cursor: pointer"
                      v-if="basicInfo.status == 0 && detailType == 1"
                      @click="deleteUnit(row)"
                    ></span>
                  </div>
                </template>
              </el-table-column>
            </ai-table>
          </template>
        </ai-card>
        <ai-card title="任务信息">
          <template slot="content">
            <ai-wrapper class="mar-t16" label-width="80px" :columnsNumber="2">
              <ai-info-item label="发起人："
                ><span>{{ basicInfo.sponsorUserName }}</span></ai-info-item
              >
              <ai-info-item label="创建人："
                ><span>{{ basicInfo.createUserName }}</span></ai-info-item
              >
              <ai-info-item label="创建时间："
                ><span>{{ basicInfo.createTime }}</span></ai-info-item
              >
            </ai-wrapper>
            <ai-wrapper class="mar-t16" label-width="80px" :columnsNumber="2">
              <ai-info-item label="任务状态：">
                <span>{{
                  dict.getLabel("workTaskStatus", basicInfo.status) || "-"
                }}</span>
              </ai-info-item>
              <ai-info-item label="任务类型："
                ><span>{{
                  $dict.getLabel("workTaskType", basicInfo.type) || "-"
                }}</span></ai-info-item
              >
            </ai-wrapper>
            <ai-wrapper class="mar-t16" label-width="80px" :columnsNumber="2">
              <ai-info-item label="截止时间：">
                <span
                  >{{ basicInfo.lastTime
                  }}<i
                    :style="
                      basicInfo.isOverTime == 0
                        ? 'color:#FF8822;'
                        : 'color:#FF4466;'
                    "
                    style="margin-left: 8px; font-style: inherit"
                    v-if="basicInfo.overTimeStatus"
                    >({{ basicInfo.overTimeStatus }})</i
                  ></span
                >
              </ai-info-item>
            </ai-wrapper>
            <ai-wrapper label-width="80px" :columnsNumber="1">
              <ai-info-item label="任务说明："
                ><span>{{ basicInfo.taskDescription }}</span></ai-info-item
              >
            </ai-wrapper>
            <ai-bar title="附件">
              <template
                slot="right"
                v-if="basicInfo.fileList && basicInfo.fileList.length"
              >
                <span class="Edit" @click="downFileAll"
                  ><i class="iconfont iconDownload"></i>下载全部</span
                >
              </template>
            </ai-bar>
            <ai-file-list
              v-if="basicInfo.fileList && basicInfo.fileList.length"
              :fileList="basicInfo.fileList"
              :fileOps="{ name: 'name', size: 'fileSizeStr' }"
            ></ai-file-list>
          </template>
        </ai-card>
        <ai-card title="人员信息">
          <template slot="content">
            <div class="especial">
              <span class="people mar-r40 w80">执行人：</span>
              <ai-wechat-selecter
                slot="append"
                isShowUser
                :instance="instance"
                v-model="basicInfo.userInfoList"
                :isAdd="false"
              ></ai-wechat-selecter>
            </div>
            <div class="especial">
              <span class="people mar-r40 w80">督办人：</span>
              <ai-wechat-selecter
                slot="append"
                isShowUser
                :instance="instance"
                v-model="basicInfo.checkUserList"
                :isAdd="false"
              ></ai-wechat-selecter>
            </div>
            <div class="especial">
              <span class="people mar-r40 w80">抄送人：</span>
              <ai-wechat-selecter
                slot="append"
                isShowUser
                :instance="instance"
                v-model="basicInfo.sendUserList"
                :isAdd="false"
              ></ai-wechat-selecter>
            </div>
          </template>
        </ai-card>
        <el-dialog
          class="deleteStyle mask execute"
          :visible.sync="executeDialog"
          width="800px"
          title="执行情况"
          :close-on-click-modal="false"
        >
          <el-dialog
            width="520px"
            title="执行说明："
            class="deleteStyle mask execute"
            :visible.sync="innerVisible"
            @close="getExecute(executeInfo)"
            :close-on-click-modal="false"
            append-to-body
          >
            <div style="width: 480px; margin: auto; padding: 8px 0">
              <el-form
                :model="sayInfo"
                ref="numberValidateForm"
                label-width="100px"
                class="demo-ruleForm"
              >
                <el-form-item label="执行说明：" prop="doDescription">
                  <el-input
                    maxlength="1000"
                    show-word-limit
                    type="textarea"
                    :rows="3"
                    v-model="sayInfo.doDescription"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-form>
            </div>
            <div slot="footer" style="text-align: center">
              <el-button
                style="width: 92px"
                size="small"
                @click="(innerVisible = false), getExecute(executeInfo)"
                >取 消</el-button
              >
              <el-button
                style="width: 92px"
                type="primary"
                size="small"
                @click="updateDescription()"
                >确 认</el-button
              >
            </div>
          </el-dialog>
          <div
            style="
              width: 740px;
              margin: auto;
              padding: 8px 0;
              max-height: 600px;
              overflow: auto;
            "
          >
            <ai-wrapper class="mar-t16" label-width="80px" :columnsNumber="2">
              <ai-info-item label="执行人："><span>{{ executeInfo.userName }}</span></ai-info-item>
              <ai-info-item label="手机号："><span>{{ executeInfo.phone }}</span></ai-info-item>
            </ai-wrapper>
            <ai-wrapper label-width="80px" :columnsNumber="1">
              <ai-info-item label="所属部门："><span>{{ executeInfo.unitName }}</span></ai-info-item>
            </ai-wrapper>
            <ai-wrapper label-width="80px" :columnsNumber="2">
              <ai-info-item label="执行状态：">
                <p v-if="executeInfo.doStatus == 0" style="color: #ff8822">
                  未完成
                </p>
                <p v-if="executeInfo.doStatus == 1" style="color: #2ea222">
                  已完成
                </p>
                <p v-if="executeInfo.doStatus == 2">已终止</p>
                <p v-if="executeInfo.doStatus == 3">进行中</p>
                <p v-if="executeInfo.doStatus == 4">已关闭</p>
                <p v-if="executeInfo.doStatus == null">-</p>
              </ai-info-item>
              <ai-info-item label="完成时间：">
                <i style="display: block; font-style: normal">{{
                  executeInfo.finishTime || "-"
                }}</i>
                <i
                  style="color: #ff4466; display: block; font-style: normal"
                  v-if="executeInfo.overTimeStatus && executeInfo.doStatus == 1"
                  >({{ executeInfo.overTimeStatus }})</i
                >
              </ai-info-item>
            </ai-wrapper>
            <ai-wrapper label-width="80px" :columnsNumber="1">
              <ai-info-item label="当前进度："><span>{{ executeInfo.percent + "%" }}</span></ai-info-item>
            </ai-wrapper>
            <ai-wrapper label-width="80px" :columnsNumber="1">
              <ai-info-item label="执行说明："><span>{{ executeInfo.doDescription }}</span></ai-info-item>
            </ai-wrapper>

            <div class="step">
              <!-- <el-steps direction="vertical" :active="null" >
                  <el-step icon="iconfont iconSteps_Finished" v-for="(e,index) in executeInfo.processList" :key="index">
                      <template v-slot:title>
                          <p style="color:#333333;">{{e.remarks}}</p>
                      </template>
                      <template v-slot:description>
                          <p style="color:#999999;">完成到 <span :style="e.percent<100 ? 'color:#5088FF':'color:#2EA222' ">{{e.percent}}%</span>  |  {{e.createDate}}</p>
                      </template>
                  </el-step>
                  
              </el-steps> -->
              <el-timeline>
                <el-timeline-item
                  v-for="(e, index) in executeInfo.processList"
                  :key="index"
                >
                  <p style="color: #333333">{{ e.remarks }}</p>
                  <p style="color: #999999">
                    完成到
                    <span
                      :style="e.percent < 100 ? 'color:#5088FF' : 'color:#2EA222'"
                      >{{ e.percent }}%</span
                    >
                    | {{ e.createDate }}
                  </p>
                </el-timeline-item>
              </el-timeline>
            </div>
          </div>
          <div slot="footer" style="text-align: center">
            <el-button
              style="width: 92px"
              size="small"
              @click="executeDialog = false"
              >关 闭</el-button
            >
            <el-button
              style="width: 148px"
              type="primary"
              size="small"
              @click="
                (innerVisible = true),
                  (sayInfo.doDescription = executeInfo.doDescription)
              "
              v-if="basicInfo.status == 0"
              >编辑执行说明</el-button
            >
          </div>
        </el-dialog>
      </template>
    </ai-detail>
    <!-- <detail v-else :instance="instance" :dict="dict" @back="showDetail=false" :params="parentInfo" fromType="SonDetail" detailType="1"></detail> -->
  </div>
</template>

<script>

;
import { mapState } from "vuex";
export default {
  name: "SonDetail",
  props: {
    instance: Function,
    params: Object,
    dict: Object,
    detailType: String
  },
  data() {
    return {
      basicInfo: {
        userInfoList: [],
        checkUserList: [],
        sendUserList: [],
      },
      ListType: "userInfoList",
      listName: "",
      saveList: [],
      suspendDialog: false,
      REttitle: "",
      writeInfo: {
        finishDescription: "",
      },
      appReportTaskDoInfoList: [],
      taskRole: "1",
      checkName: "",
      sendName: "",
      userName: "",
      executeDialog: false,
      executeInfo: {},
      sayInfo: {
        doDescription: "",
      },
      isAll: false,
      colConfigs: [
        { prop: "userName", label: "姓名" },
        { prop: "phone", label: "手机号码" },
        { prop: "unitName", label: "所属部门" },
        { slot: "status"},
        { slot: "percent", label: "完成进度" },
        { slot: "finishTime"},
        { slot: "options", label: "操作" },
      ],
      addUserList: [],
      innerVisible: false,
      showDetail: false,
      parentInfo: {}
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  mounted() {
    this.dict
      .load("workTaskType", "workTaskStatus", "workTaskFinishStatus")
      .then(() => {
        this.searchDetail();
      });
  },
  methods: {
    //查详情
    searchDetail() {
      this.sendName = "";
      this.checkName = "";
      this.userName = "";
      this.instance
        .post("/app/appworktaskinfo/queryDetailById", null, {
          params: { id: this.params.id },
        })
        .then((res) => {
          if (res.code == 0) {
            this.basicInfo = res.data;

            this.basicInfo.userInfoList.map((item) => {
              item.detailId = item.id
              item.name = item.userName
              item.id = item.userId
            })

            if(this.basicInfo.checkUserList.length) {
              this.basicInfo.checkUserList.map((item) => {
              item.detailId = item.id
              item.name = item.userName
              item.id = item.userId
              })
            }

            if(this.basicInfo.sponsorUserList.length) {
              this.basicInfo.sponsorUserList.map((item) => {
              item.detailId = item.id
              item.name = item.userName
              item.id = item.userId
              })
            }

            if(this.basicInfo.sendUserList.length) {
              this.basicInfo.sendUserList.map((item) => {
              item.detailId = item.id
              item.name = item.userName
              item.id = item.userId
              })
            }
            
            
            this.parentInfo = res.data.parentTask
            this.saveList = JSON.stringify(this.basicInfo[this.ListType]);

            if (this.basicInfo.checkUserList.length) {
              this.basicInfo.checkUserList.forEach((v) => {
                this.checkName += v.userName + "、";
              });
              this.checkName = this.checkName.substring(
                0,
                this.checkName.length - 1
              );
            }

            if (this.basicInfo.userInfoList.length) {
              this.basicInfo.userInfoList.forEach((v, index) => {
                this.userName += v.userName + "、";
                this.basicInfo.userInfoList[index].isSend = false;
              });
              this.userName = this.userName.substring(
                0,
                this.userName.length - 1
              );
            }

            if (this.basicInfo.sendUserList.length) {
              this.basicInfo.sendUserList.forEach((v) => {
                this.sendName += v.userName + "、";
              });
              this.sendName = this.sendName.substring(
                0,
                this.sendName.length - 1
              );
            }

            //人员选择器去重
            this.appReportTaskDoInfoList = [
              ...this.basicInfo.userInfoList,
              ...this.basicInfo.checkUserList,
              ...this.basicInfo.sendUserList,
              ...this.basicInfo.sponsorUserList,
            ];
            this.showEchartScale();
          }
        });
    },
    showEchartScale() {
      let myChart = echarts.init(document.getElementById("echart"));
      let legendData = ["未完成", "已完成", "逾期完成"];
      let seriesData = [
        { value: this.basicInfo.unFinished, name: "未完成" },
        { value: this.basicInfo.finishedOnTime, name: "按时完成" },
        { value: this.basicInfo.finishedOutOfTime, name: "逾期完成" },
      ];
      let option = {
        backgroundColor: "#fff",
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          right: 340,
          top: 70,
          bottom: 20,
          itemWidth: 8,
          itemHeight: 8,
          formatter: (name) => {
            let item = seriesData.find((e) => e.name == name);
            return `{title|${name}}{content|${
              item ? item.value.toLocaleString() : 0
            }}`;
          },
          // data: legendData
          textStyle: {
            fontSize: 14,
            rich: {
              title: {
                width: 100,
                color: "#AAA",
                paddingLeft: 6,
                fontSize: 14,
              },
              content: {
                color: "#333",
                width: 50,
                align: "right",
                fontSize: 14,
              },
            },
          },
        },
        series: [
          {
            name: "完成情况比例",
            type: "pie",
            radius: ["40%", "75%"],
            center: ["14%", "45%"],
            avoidLabelOverlap: false,
            label: {
              position: "inside",
              formatter: (params) => {
                if (params.value == 0) {
                  return "";
                } else {
                  return `${params.percent}%`;
                }
              },
            },
            data: seriesData,
            itemStyle: {
              normal: {
                color: function (params) {
                  //自定义颜色
                  var colorList = ["#FFAA44", "#2EA222", "#3D94FB"];
                  return colorList[params.dataIndex];
                },
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    ListTypeChange(val) {
      this.saveList = JSON.stringify(this.basicInfo[val]);
      this.listName = "";
      if (val == "userInfoList") this.taskRole = "1";
      if (val == "checkUserList") this.taskRole = "2";
      if (val == "sendUserList") this.taskRole = "3";
      this.searchDetail(this.params.id);
    },
    //删除任务
    deleteTask() {
      this.$confirm("是否确认删除本次任务，删除后无法恢复？", {
        type: "error",
      }).then(() => {
        this.instance
          .post("/app/appworktaskinfo/delete", null, {
            params: {
              id: this.params.id,
            },
          })
          .then((res) => {
            if (res.code == 0) {
              this.$message.success("删除成功");
              this.onBack();
            }
          });
      });
    },
    filterData(val) {
      if (val) {
        let list = JSON.parse(this.saveList).filter(
          (e) => e.userName.indexOf(val) !== -1
        );
        this.$set(this.basicInfo, this.ListType, list);
      } else {
        this.$set(this.basicInfo, this.ListType, JSON.parse(this.saveList));
      }
    },
    //催办多人
    urgeMessageAll() {
      if (!this.isAll) {
        this.$confirm("是否向全部执行人发送催办提醒？", {
          type: "warning",
          title: "发送催办提醒",
        }).then(() => {
          this.instance
            .post("/app/appworktaskuserinfo/sendMesage", null, {
              params: {
                id: this.params.id,
              },
            })
            .then((res) => {
              if (res.code == 0) {
                this.$message.success("催办消息已发送");
                this.isAll = true;
                this.basicInfo.userInfoList.forEach((e, index) => {
                  e.isSend = true;
                  this.$set(this.basicInfo.userInfoList, index, e);
                });
              }
            });
        });
      }
    },
    //催办单人
    urgeMessage(row) {
      if (row.doStatus == 0 && !row.isSend) {
        this.$confirm(`是否向【执行人：${row.userName}】发送催办提醒？`, {
          type: "warning",
          title: "发送催办提醒",
        }).then(() => {
          this.instance
            .post("/app/appworktaskuserinfo/sendMesageOne", null, {
              params: {
                id: row.detailId,
              },
            })
            .then((res) => {
              if (res.code == 0) {
                this.$message.success("催办消息已发送");
                row.isSend = true;
                let index = this.basicInfo.userInfoList.findIndex(
                  (e) => e.id == row.id
                );
                if (index > -1)
                  this.$set(this.basicInfo.userInfoList, index, row);
              }
            });
        });
      }
    },
    //执行情况
    getExecute(row) {
      this.instance
        .post("/app/appworktaskuserinfo/queryDetailById", null, {
          params: {
            id: row.detailId,
          },
        })
        .then((res) => {
          if (res.code == 0) {
            this.executeDialog = true;
            this.executeInfo = res.data;
            this.executeInfo.detailId = this.executeInfo.id
          }
        });
    },
    updateDescription() {
      this.instance
        .post(`/app/appworktaskuserinfo/updateDoDescription`, {
          id: this.executeInfo.detailId,
          doDescription: this.sayInfo.doDescription,
        })
        .then((res) => {
          if (res.code == 0) {
            this.innerVisible = false;
          }
        });
    },
    //中止任务-取消任务-退回任务
    overTask(formName) {
      let url = ``;
      if (this.REttitle == "任务完成情况") {
        url = `/app/appworktaskuserinfo/confirm`;
        var obj = {
          taskCode: this.params.taskCode,
          finishDescription: this.writeInfo.finishDescription,
          lastTime: this.basicInfo.lastTime,
        };
      } else if (this.REttitle == "关闭任务") {
        url = `/app/appworktaskinfo/stopOrFinish`;
        var obj = {
          id: this.params.id,
          status: "2",
          closeDescription: this.writeInfo.finishDescription,
        };
      } else if (this.REttitle == "取消任务") {
        url = `/app/appreporttaskinfo/cancelTaskById`;
        var obj = {
          id: this.params.id,
          ...this.writeInfo,
        };
      }
      this.instance
        .post(
          url,
          {
            ...obj,
          },
          null
        )
        .then((res) => {
          if (res.code == 0) {
            this.$message.success(this.REttitle + "成功");
            if (this.REttitle == "退回任务") {
              this.searchDetail(this.params.id);
            } else {
              this.onBack();
            }
            this.suspendDialog = false;
          }
        });
    },

    //确认完成
    markCompleted(type) {
      this.$confirm(
        "标记完成后，本次任务变成已完成，任务结果将锁定无法修改，请确保所有执行人已经完成任务，是否继续？",
        {
          type: "success",
          title: "标记完成",
        }
      ).then(() => {
        this.instance
          .post(
            "/app/appworktaskinfo/stopOrFinish",
            {
              id: this.params.id,
              status: type,
            },
            null
          )
          .then((res) => {
            if (res.code == 0) {
              this.$message.success("已标记完成");
              this.onBack();
            }
          });
      });
    },
    //删掉执行单位
    deleteUnit(row) {
      this.$confirm("是否确认删除此人？", {
        type: "warning",
      }).then(() => {
        this.instance
          .post("/app/appworktaskuserinfo/delete", null, {
            params: {
              ids: row.detailId,
            },
          })
          .then((res) => {
            if (res.code == 0) {
              this.$message.success("删除成功");
              this.searchDetail(this.params.id);
            }
          });
      });
    },
    surePersonalFn() {
      this.lastPersonalList = this.tags;
      this.lastPersonalList.forEach((item, index) => {
        this.lastPersonalList[index].taskCode = this.params.taskCode;
        this.lastPersonalList[index].taskRole = this.taskRole;
      });
      if (this.lastPersonalList.length > 0) {
        this.instance
          .post(
            `/app/appworktaskuserinfo/addUserInfos`,

            this.lastPersonalList
          )
          .then((res) => {
            if (res.code == 0) {
              this.$message.success("保存成功");
              this.showSelectPer = false;
              this.searchDetail(this.params.id);
            }
          });
      } else {
        this.$message.error("增加人数不能为空");
      }
    },
    surePersonal() {
      debounce(this.surePersonalFn(), 3000);
    },
    downFileAll () {
      if (this.basicInfo.fileList.length > 0) {
        this.instance.post('/app/appofficialdocumentinfo/downLoadAllFileForDetail', null, {
          responseType: 'blob',
          params: {
            id: this.basicInfo.id
          }
        }).then((res) => {
          const link = document.createElement('a')
          let blob = new Blob([res], { type: 'application/vnd.ms-excel' })
          link.style.display = 'none'
          link.href = URL.createObjectURL(blob)
          var num = ''
          for (let i = 0; i < 10; i++) {
            num += Math.ceil(Math.random() * 10)
          }
          link.setAttribute('download', '工作文件' + '.zip')
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
        })
      } else {
        this.$message.error('暂无附件提供下载')
      }
    },
    downFile(item) {
      window.open(item.url);
    },
    onBack() {
      if(this.detailType == 'detail') { //从父任务
        this.$emit("back");
      }else { //列表
        this.$emit('change', {
          type: 'list',
        })
      }
      
    },
    toParent() {
      if(this.detailType == 'detail') { //从父任务
        this.$emit("back");
      }else { //列表
        this.$emit('change', {
          type: 'Detail',
          params: {
            type: 'Detail',
            id: this.parentInfo.id,
            fromType: 'SonDetail',
            sonDetailId: this.params.id
          }
        })
      }
    },
    confirmAdd(type) {
      if(this.addUserList.length>0){
        this.addUserList.map((item) => {
          item.taskRole = type
          item.taskCode = this.basicInfo.taskCode;
        })
        this.instance.post(`/app/appworktaskuserinfo/addUserInfos`,this.addUserList).then(res => {
          if(res.code==0){
            this.addUserList = []
            this.$message.success('保存成功');
            this.searchDetail();
          }
        });
      }else{
        this.$message.error("增加人数不能为空")
      }
    },
    closeWork() {
      this.$confirm("任务关闭后无法恢复，确定关闭？", {
        type: "error",
      }).then(() => {
        this.REttitle = "关闭任务"
        this.overTask()
      });
    }
  },
};
</script>

<style scoped lang="scss">
.especial {
  margin-bottom: 12px;
  .icon {
    vertical-align: top;
    display: inline-block;
    padding-top: 5px;
    margin-left: 20px;
    color: #f46;
  }
  .people {
    display: inline-block;
    font-size: 14px;
    color: #666;
    margin-right: 16px;
    vertical-align: top;
  }
  .AiWechatSelecter {
    display: inline-block;
    margin-left: 3px;
  }
  .hint {
    font-size: 14px;
    color: #999;
    margin-left: 16px;
  }
  .mar-r40 {
    margin-right: 40px;
  }
  .w80 {
    width: 80px;
    text-align: right;
    color: #888;
  }
}
.add-icon {
  text-align: right;
  cursor: pointer;
  i {
    font-size: 14px;
  }
}
.color1 {
  color: #4b87fe;
}
.color2 {
  color: #2ea222;
}
.color3 {
  color: #999999;
}
.echart {
  width: 100%;
  height: 240px;
}
.AiWechatSelecter{
  width: calc(100% - 150px);
}
</style>
