<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-select
            v-model="selectUserId"
            :options="selectDataUser"
            placeholder="请选择指派对象"
            style="margin-top:0.2rem;"
          ></cube-select>
        </div>
        <div v-if="textName === 'textarea'">
          <div class="tipsAll">
            <div class="tips" v-for="item in logs" :key="item.id" @click="copyTo(item.value)">
              {{ item.value }}
            </div>
          </div>
          <cube-textarea
            autofocus
            :maxlength="255"
            v-model="textareaData"
            placeholder="请填写处理日志"
            style="border:1px solid #ececec;height:2rem;resize:none;"
          ></cube-textarea>
        </div>
      </div>
      <div class="showModel__footer">
        <div v-if="operate.ok" class="showModel__ok" @click="ok">
          {{ operate.ok || "" }}
        </div>
        <div v-if="operate.cancel" class="showModel__cancel" @click="cancel">
          {{ operate.cancel || "" }}
        </div>
        <div v-if="operate.know" class="showModel__know" @click="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 {
      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的数据
    };
  },
  watch: {
    disjunctor(newValue) {
      if (newValue && this.textName === "textarea") {
        this.textareaData = "";
      }
      if (newValue && this.operate.know == "知道了") {
        this.time = 5;
        this.timer = setInterval(() => {
          this.time--;
          if (this.time <= 0) {
            clearInterval(this.timer);
            this.know();
          }
        }, 1000);
      }
    }
  },
  props: {
    // 显示隐藏
    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: ""
    },
    // 文本块(处理日志)
    textName: {
      type: String,
      default: ""
    },
    // 操作按钮文字
    operate: {
      type: Object,
      default: () => {
        return {
          know: "知道了"
        };
      }
    }
  },
  methods: {
    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);
        });
    },
    //选择组
    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
        }
      };
      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;
          }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", this.selectUserId);
      } else if (this.textName === "textarea") {
        this.$emit("ok", this.textareaData);
      } else {
        this.$emit("ok");
      }
    },
    // 取消
    cancel() {
      this.$emit("cancel");
    },
    // 知道了
    know() {
      clearInterval(this.timer);
      this.$emit("know");
    },
    // 取消自动关闭
    cancelTimer() {
      this.timerFlag = false;
      clearInterval(this.timer);
    }
  },
  created() {
    if (this.selectName === "user") {
      this.getZpBranch();
      // this.getZpGroup();
      // this.getZpUser();
    }
    if (this.textName === "textarea") {
      this.getLogs();
    }
  }
};
</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;

  .tipsAll {
    display: flex;
    flex-wrap: wrap;
    .tips {
      word-break: break-all;
      margin-bottom: 0.1rem;
      margin-left: 0.2rem;
      &:first-of-type {
        margin-left: 0;
      }
    }
  }

  .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;
      }
      .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);
        }
      }

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

      .showModel__cancel {
        flex: 1;
      }

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