<template>
  <div class="showModel" v-if="disjunctor">
    <div class="showModel__wrap">
      <div class="showModel__header" v-if="title">
        {{ title }}
        <span v-if="operate.know == '知道了' && timerFlag">({{ time }})</span>
      </div>
      <div class="showModel__article">
        <span
          v-if="icon"
          class="showModel__icon icon_transport"
          :class="[
            'showModel__icon--' + icon,
            { 'transport-duigou': icon === 'success' },
            { 'transport-shibai': icon === 'error' },
            { 'transport-wenhao': icon === 'warn' }
          ]"
        ></span>
        <div v-if="content" class="showModel__content" v-html="content"></div>
        <div v-if="info" class="showModel__info">{{ info }}</div>
        <div class="select-wrap" v-if="selectName === 'user'">
          <cube-select
            v-model="selectBranchId"
            :options="selectDataBranch"
            placeholder="请选择院区"
            @change="changeBranch($event)"
          ></cube-select>
          <cube-select
            v-model="selectDutyId"
            :options="selectDataDuty"
            placeholder="请选择责任科室"
            @change="changeDuty($event)"
            style="margin-top:0.2rem;"
          ></cube-select>
          <cube-select
            v-model="selectGroupId"
            :options="selectDataGroup"
            placeholder="请选择工作组"
            @change="changeGroup($event)"
            style="margin-top:0.2rem;"
          ></cube-select>
          <cube-switch v-model="isRadioUser" style="margin-top:0.2rem;" @input="changeRadioUser">是否指派到人</cube-switch>
          <cube-select
            v-model="selectUserId"
            :options="selectDataUser"
            placeholder="请选择指派对象"
            style="margin-top:0.2rem;" v-if="isRadioUser"
          ></cube-select>
        </div>
        <div v-if="textName === 'textarea'">
          <div>
            <div><span class="red">*</span>维修方式：</div>
            <cube-select
            v-model="maintenanceMode"
            :options="modes"
            placeholder="请选择维修方式"
            style="margin:0.2rem 0;"
          ></cube-select>
          </div>
          <div>
            <div><span class="red">*</span>预估天数：</div>
            <cube-select
            v-model="estimatedNumberOfDays"
            :options="days"
            placeholder="请选择预估天数"
            style="margin:0.2rem 0;"
          ></cube-select>
          </div>
          <div>
            <div><span class="red">*</span>备注：</div>
            <cube-textarea
              autofocus
              :maxlength="255"
              v-model="textareaData"
              placeholder="请填写备注"
              style="border:1px solid #ececec;height:2rem;resize:none;"
            ></cube-textarea>
            <div class="tipsAll">
              <div class="tips" v-for="item in logs" :key="item.id" @click="copyTo(item.value)">
                {{ item.value }}
              </div>
            </div>
          </div>
        </div>
        <!-- 耗材 -->
        <div class="select-wrap hc" v-if="selectName === 'hc_add' || selectName === 'hc_edit'">
          <div class="hc_item">名称：{{ data.hc.name }}</div>
          <div class="hc_item">型号品牌：{{ data.hc.brandModel }}</div>
          <div class="hc_item">单价：{{ data.hc.endPrice }}元</div>
          <div class="hc_item">使用数量：<cube-input type="number" style="flex:1" v-model="consumablesNum"></cube-input></div>
        </div>
        <!-- 工时 -->
        <div class="select-wrap hc" v-if="selectName === 'gs_edit'">
          <div class="hc_item">工时名称：{{ data.gs.workName }}<span v-if="data.workUnit">{{ data.gs.workUnit }}</span></div>
          <div class="hc_item">单价：{{ data.gs.wage }}元</div>
          <div class="hc_item">使用数量：<cube-input type="number" style="flex:1" v-model="workHourNum2"></cube-input></div>
        </div>
      </div>
      <div class="showModel__footer">
        <div v-if="operate.ok" class="showModel__ok" @click="ok">
          {{ operate.ok || "" }}
        </div>
        <div v-if="operate.remove && (selectName === 'hc_edit' || selectName === 'gs_edit')" class="showModel__remove" @click.stop="remove">
          {{ operate.remove || "" }}
        </div>
        <div v-if="operate.cancel" class="showModel__cancel" @click.stop="cancel">
          {{ operate.cancel || "" }}
        </div>
        <div v-if="operate.know" class="showModel__know" @click.stop="know">
          {{ operate.know || "" }}
        </div>
        <div
          v-if="operate.know && timerFlag"
          class="showModel__know"
          @click="cancelTimer"
        >
          取消自动关闭
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShowRadioUser: false,
      isRadioUser: false,
      consumablesNum: this.data ? (this.data.consumablesNum ? this.data.consumablesNum : 1) : 1,
      workHourNum2: this.data ? (this.data.workHourNum2 ? this.data.workHourNum2 : 1) : 1,
      loginUser: JSON.parse(localStorage.getItem("loginUser")),
      logs: [],
      time: 5, //5秒后自动关闭
      timer: null, //5秒后自动关闭，定时器
      timerFlag: true, //是否显示取消自动关闭按钮
      selectDataUser: [], //select数据-用户
      selectUserId: undefined, //select选中的数据-用户
      selectDataGroup: [], //select数据-工作组
      selectGroupId: undefined, //select选中的数据-工作组
      selectDataBranch: [], //select数据-院区
      selectBranchId: undefined, //select选中的数据-院区
      selectDataDuty: [], //select数据-责任科室
      selectDutyId: undefined, //select选中的数据-责任科室
      textareaData: "", //textarea的数据
      maintenanceMode: "", //维修方式
      estimatedNumberOfDays: "", //预估天数
      modes: [],//维修方式列表
      modesResource: [],//维修方式列表
      days: [
        {text: 1, value: 1},
        {text: 2, value: 2},
        {text: 3, value: 3},
        {text: 4, value: 4},
        {text: 5, value: 5},
        {text: 6, value: 6},
        {text: 7, value: 7},
        {text: 8, value: 8},
        {text: 9, value: 9},
        {text: 10, value: 10},
        {text: 11, value: 11},
        {text: 12, value: 12},
        {text: 13, value: 13},
        {text: 14, value: 14},
        {text: 15, value: 15},
      ],//预估天数列表
    };
  },
  watch: {
    disjunctor(newValue) {
      if (newValue && this.textName === "textarea") {
        this.textareaData = "";
        this.maintenanceMode = "";
        this.estimatedNumberOfDays = "";
      }
      if (newValue && this.operate.know == "知道了") {
        this.time = 5;
        this.timer = setInterval(() => {
          this.time--;
          if (this.time <= 0) {
            clearInterval(this.timer);
            this.know();
          }
        }, 1000);
      }
    }
  },
  props: {
    // 携带的数据
    data: {
      type: Object,
      default: () => {}
    },
    // 显示隐藏
    disjunctor: {
      type: Boolean,
      default: false
    },
    // 标题
    title: {
      type: String,
      default: "提示"
    },
    // 图标
    icon: {
      type: String,
      default: "success"
    },
    // 内容
    content: {
      type: String,
      default: ""
    },
    // 说明
    info: {
      type: String,
      default: ""
    },
    // 下拉框(user)
    selectName: {
      type: String,
      default: ""
    },
    // 下拉框(user)
    dataObj: {
      type: Object,
      default: () => {}
    },
    // 文本块(维修记录)
    textName: {
      type: String,
      default: ""
    },
    // 操作按钮文字
    operate: {
      type: Object,
      default: () => {
        return {
          know: "知道了"
        };
      }
    }
  },
  methods: {
    changeRadioUser(){
      this.selectUserId = undefined;
    },
    copyTo(value){
      this.textareaData += value;
    },
    getLogs() {
      var postData = { idx: 0, sum: 999, dictionary: { key: "processingLog" } };
      this.$http
        .post("service/bpm/data/fetchDataList/dictionary", postData)
        .then(res => {
          res.data.list = res.data.list || [];
          this.logs = res.data.list.slice(0,2);
        });
    },
    getModes() {
      var postData = { idx: 0, sum: 999, dictionary: { key: "repair_type" } };
      this.$http
        .post("service/bpm/data/fetchDataList/dictionary", postData)
        .then(res => {
          res.data.list = res.data.list || [];
          this.modes = res.data.list.map(v => ({text: v.name, value: v.id}));
          this.modesResource = res.data.list;
        });
    },
    //选择组
    changeGroup(groupId) {
      this.getZpUser(groupId);
    },
    //选择院区
    changeBranch(branchId) {
      console.log(branchId);
      this.getZpDuty(branchId);
    },
    //选择责任科室
    changeDuty(dutyId) {
      console.log(dutyId);
      this.getZpGroup(dutyId);
    },
    // 获取指派对象
    getZpUser(groupId) {
      this.selectDataUser = [];
      var postData = {
        idx: 0,
        sum: 1000,
        user: {
          roledata: { rolecode: "first-line support" },
          roledata2: { rolecode: "second-line support" },
          selectType: "1",
          selectDetails: 1,
          simple: true,
        }
      };
      if (groupId) {
        postData.user.groupdata = { id: groupId };
      }
      this.$http
        .post("service/user/data/fetchDataList/user", postData)
        .then(res => {
          res.data.list = res.data.list || [];
          this.selectDataUser = res.data.list.map(v => {
            return {
              text: v.name + "【" + v.taskCount + "】",
              value: v.id
            };
          });
        });
    },
    // 获取工作组
    getZpGroup(dutyId) {
      this.selectDataGroup = [];
      this.selectDataUser = [];
      this.selectUserId = undefined;
      var postData = {
        idx: 0,
        sum: 1000,
        group: {
          duty:{id:dutyId},
          selectType: "nouser"
        }
      };
      this.$http
        .post("service/user/data/fetchDataList/group", postData)
        .then(res => {
          res.data.list = res.data.list || [];
          this.selectDataGroup = res.data.list.map(v => {
            return {
              text: v.groupName,
              value: v.id
            };
          });
        });
    },
    // 获取院区
    getZpBranch() {
      this.selectDataBranch = [];
      this.selectDataBranch = [];
      this.selectBranchId = undefined;
      this.selectDataGroup = [];
      this.selectGroupId = undefined;
      this.selectDataUser = [];
      this.selectUserId = undefined;
      var postData = {
        idx: 0,
        sum: 1000
      };
      this.$http
        .post("service/user/data/fetchDataList/branch", postData)
        .then(res => {
          res.data.list = res.data.list || [];
          this.selectDataBranch = res.data.list.map(v => {
            return {
              text: v.hosName,
              value: v.id
            };
          });
          if(this.loginUser.duty){
            this.selectBranchId = this.loginUser.duty.branch;
            this.selectDutyId = this.loginUser.duty.id;
            this.getZpGroup(this.selectDutyId);
          }else if(this.loginUser.branch){
            this.selectBranchId = this.loginUser.branch?this.loginUser.branch.id:undefined;
          }
          this.getZpDuty(this.selectBranchId);
        });
    },
    // 获取责任科室
    getZpDuty(branchId) {
      this.selectDataDuty = [];
      this.selectDataGroup = [];
      this.selectGroupId = undefined;
      this.selectDataUser = [];
      this.selectUserId = undefined;
      var postData = {
        idx: 0,
        sum: 1000,
        dutyDepartment:{
          branch:branchId
        }
      };
      this.$http
        .post("service/user/data/fetchDataList/dutyDepartment", postData)
        .then(res => {
          res.data.list = res.data.list || [];
          this.selectDataDuty = res.data.list.map(v => {
            return {
              text: v.dept,
              value: v.id
            };
          });
        });
    },
    // 单选框选中
    radioChange(item) {
      this.$emit("radioChange", item.target.value);
    },
    // 确定
    ok() {
      if (this.selectName === "user") {
        this.$emit("ok", {selectUserId: this.selectUserId, isRadioUser: this.isRadioUser, selectGroupId: this.selectGroupId});
      } else if (this.selectName === "hc_add" || this.selectName === "hc_edit") {
        this.$emit("ok", {hc: this.data.hc, consumablesNum:this.consumablesNum});
      } else if (this.selectName === "gs_edit") {
        this.$emit("ok", {gs: this.data.gs, workHourNum2:this.workHourNum2});
      } else if (this.textName === "textarea") {
        this.$emit("ok", {textareaData: this.textareaData, maintenanceMode: this.modesResource.find(v=> v.id == this.maintenanceMode), estimatedNumberOfDays: this.estimatedNumberOfDays});
      } else {
        this.$emit("ok");
      }
    },
    // 移除
    remove(){
      if(this.selectName === "hc_edit"){
        this.$emit("remove", {hc: this.data.hc, consumablesNum:this.consumablesNum});
      }else if(this.selectName === "gs_edit"){
        this.$emit("remove", {gs: this.data.gs, workHourNum2:this.workHourNum2});
      }
    },
    // 取消
    cancel() {
      this.$emit("cancel");
    },
    // 知道了
    know() {
      clearInterval(this.timer);
      this.$emit("know");
    },
    // 取消自动关闭
    cancelTimer() {
      this.timerFlag = false;
      clearInterval(this.timer);
    }
  },
  created() {
    console.log(this.data)
    if (this.selectName === "user") {
      this.getZpBranch();
      // this.getZpGroup();
      // this.getZpUser();
      // if(this.dataObj.state.id == 1544){
      //   this.isShowRadioUser = false;
      //   this.isRadioUser = true;
      // }else{
      //   this.isShowRadioUser = true;
      //   this.isRadioUser = false;
      // }
    }
    if (this.textName === "textarea") {
      this.getLogs();
      this.getModes();
    }
  }
};
</script>

<style lang="less">
.showModel {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 99;
  margin: 0 auto;
  .red{
    color: red;
  }

  .tipsAll {
    .tips {
      word-break: break-all;
      margin-bottom: 0.1rem;
    }
  }

  .showModel__wrap {
    width: 5.6rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 0.12rem;

    .showModel__header {
      font-size: 0.36rem;
      color: 000;
      height: 0.84rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .showModel__article {
      margin: 0.2rem auto;
      width: 4.88rem;
      padding: 0.2rem;
      background-color: rgb(249, 250, 251);
      border: 0.02rem solid rgb(229, 233, 237);
      border-radius: 0.12rem;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .showModel__icon {
        font-size: 1.38rem;
        margin-bottom: 0.32rem;

        &.showModel__icon--success {
          color: rgb(52, 179, 73);
        }

        &.showModel__icon--warn {
          color: rgb(245, 165, 35);
        }

        &.showModel__icon--error {
          color: rgb(255, 58, 82);
        }
      }

      .showModel__content {
        font-size: 0.36rem;
      }

      .showModel__info {
        font-size: 0.32rem;
        color: rgb(102, 102, 102);
      }
      .select-wrap {
        width: 80%;
        margin: 0 auto;
        &.hc{
          font-size: 0.32rem;
          .hc_item{
            margin-bottom: 0.1rem;
            display: flex;
            align-items: center;
          }
        }
      }
      .specialCloseFlag {
        width: 90%;
        height: 100%;
        padding: 0.16rem;
      }
    }

    .showModel__footer {
      box-sizing: border-box;
      height: 1rem;
      border-top: 0.02rem solid rgb(229, 233, 237);
      display: flex;
      align-items: center;

      div {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.36rem;
        color: rgb(102, 102, 102);
        position: relative;

        &:nth-of-type(2)::before {
          content: "";
          position: absolute;
          left: 0;
          bottom: 0;
          width: 0.02rem;
          height: 0.87rem;
          background-color: rgb(229, 233, 237);
        }
        &:nth-of-type(3)::before {
          content: "";
          position: absolute;
          left: 0;
          bottom: 0;
          width: 0.02rem;
          height: 0.87rem;
          background-color: rgb(229, 233, 237);
        }
      }

      .showModel__ok {
        flex: 1;
        color: #005395;
      }

      .showModel__remove {
        flex: 1;
        color: #f30922;
      }

      .showModel__cancel {
        flex: 1;
      }

      .showModel__know {
        flex: 1;
        color: #005395;
      }
    }
  }
}
</style>
