<template>
  <div class="seiminModel" v-if="opts.isVisible">
    <div class="seiminModel_container">
      <!-- 标题 -->
      <div class="seiminModel_header" :class="{ noTitle: !opts.title }">
        <span>{{ opts.title }}</span>
      </div>
      <div class="seiminModel_content">
        <!-- 内容 -->
        <div class="seiminModel_txt" v-html="opts.content"></div>
        <div class="seiminModel_item">
          <label>工时<span class="red">*</span>：</label>
          <cube-select
            v-model="complexity"
            :options="complexityList"
            @change="changeHandler()"
          >
          </cube-select>
        </div>
        <!-- <div
          class="seiminModel_item"
          v-if="(type === 'handler' && complexity != complexitySource) || type == 'now'"
        > -->
        <div class="seiminModel_item" v-if="complexity !== complexitySource">
          <label>升级原因<span class="red">*</span>：</label>
          <cube-textarea
            v-model="updateReason"
            placeholder="请填写升级原因"
          ></cube-textarea>
        </div>
      </div>
      <!-- 底部 -->
      <div class="seiminModel_footer">
        <div
          class="seiminModel_footer__btn"
          v-for="(btn, i) in opts.btns"
          :style="{
            flex: btn.flex,
            color: btn.textColor
          }"
          @click="btn.click($event)"
          :key="i"
        >
          {{ btn.name }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "seiminModel",
  data() {
    return {
      type: "",
      category: null,
      complexitySource: "",
      complexity: "",
      updateReason: "",
      complexityList: [],
      opts: {}
    };
  },
  methods: {
    // 修改工时
    changeHandler() {
      if (this.type === "handler" && this.complexitySource == this.complexity) {
        this.updateReason = "";
      }
    },
    // 查询祖辈积分
    complexityFn(category) {
      console.log(category);
      if (category.complexity) {
        return category.complexity.value;
      } else if (category.parent) {
        return this.complexityFn(category.parent);
      } else {
        return this.complexityList[0] ? this.complexityList[0].value : 1;
      }
    },
    // 获取积分字典
    getComplexity(args) {
      this.$http
        .post("service/common/common/getDictionary", {
          key: "incident_complexity",
          type: "list"
        })
        .then(res => {
          this.complexitySource = this.complexityFn(this.category);
          this.complexity = this.complexityFn(this.category);
          args.content = `您本次事件处理获得工时${this.complexitySource}，如遇问题对工时进行调整`;
          res.data.forEach((v, i) => {
            this.complexityList.push({
              text: v.name,
              value: v.value
            });
            // 默认配置项
            let defaultOptions = {
              skin: "default", //弹窗风格(default|toast|qrcode|)
              isVisible: false, //是否显示弹窗
              title: "提示", //标题
              icon: "success", //图标(success|error|warn|)
              content: "", //内容
              btns: [
                {
                  name: "取消",
                  textColor: "#666",
                  flex: 1,
                  click: this.close
                },
                {
                  name: "确认",
                  textColor: "#49B856",
                  flex: 1,
                  click: this.close
                }
              ] //弹窗按钮
            };
            // 根据弹窗风格修改默认配置项
            switch (args.skin) {
              case "toast":
                defaultOptions.btns = [
                  {
                    name: "知道了",
                    textColor: "#49b856",
                    flex: 1,
                    click: this.close
                  }
                ];
                break;
            }
            // 按钮合并参数
            if (Array.isArray(args.btns)) {
              let btns = [];
              args.btns.forEach((v, i) => {
                btns.push(Object.assign({}, defaultOptions.btns[i], v));
              });
              args.btns = btns;
            }
            // 合并配置
            this.opts = Object.assign({}, defaultOptions, args, {
              isVisible: true
            });
          });
        });
    },
    // 显示弹窗
    show(args = {}) {
      this.category = args.category;
      this.type = args.type;
      this.getComplexity(args);
    },
    // 关闭弹窗
    close() {
      this.opts.isVisible = false;
    }
  }
};
</script>
<style scoped lang="less">
.seiminModel {
  font-size: 0.36rem;
  color: #000;
  line-height: 0.5rem;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  z-index: 9;
  display: flex;
  justify-content: center;
  align-items: center;
  .seiminModel_container {
    width: 5.6rem;
    border-radius: 8px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-content: center;
    .seiminModel_header {
      height: 1rem;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .seiminModel_content {
      font-size: 0.24rem;
      flex: 1;
      background-color: #f9fafb;
      margin: 0 0.36rem 0.25rem;
      color: #333;
      padding: 0.24rem;
      border: 1px solid #e5e9ed;
      word-break: break-all;
      .seiminModel_item {
        text-align: left;
        margin-bottom: 0.16rem;
        .red {
          color: red;
        }
      }
    }
    .seiminModel_footer {
      height: 1rem;
      color: #666;
      border-top: 1px solid #e5e9ed;
      display: flex;
      justify-content: center;
      align-items: center;

      .seiminModel_footer__btn {
        height: 100%;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;

        &::after {
          content: "";
          height: 0.86rem;
          position: absolute;
          width: 1px;
          bottom: 0;
          right: 0;
          background-color: #dde1e5;
        }
      }
    }
  }
}
</style>
