<template>
  <el-dialog title="提示" :visible.sync="dialogVisible" width="80%">
    <el-tabs v-model="activeName">
      <el-tab-pane label="企查查评分" name="qcc">
        <div class="qcc-content">
          <div class="title">第三方信用评分</div>
          <div class="score">
            <div class="score-item">
              <span class="score-item-l">
                {{ creditRatingReportGrade.Score }}
              </span>
              <span class="score-item-r">评分</span>
            </div>
            <div class="score-item">
              <span class="score-item-l">
                {{ creditRatingReportGrade.Level }}
              </span>
              <span class="score-item-r">评级</span>
            </div>
          </div>
          <div class="rate">
            <el-slider
              disabled
              v-model="Score"
              :step="10"
              show-stops
              :show-tooltip="false"
              :marks="marks"
            >
            </el-slider>
          </div>
          <div class="tips">
            <p>
              以上数据是基于分析生成，仅供参考，并不代表任何明示、暗示之观点或保证。
            </p>
          </div>
          <div class="card">
            <p>评分解读</p>
            <p>优：[90,100]；信用极好，几乎无风险；</p>
            <p>优-：[80.90]；信用优良，基本无风险；</p>
            <p>良+：175.80]；信用较好，风险较小；</p>
            <p>良：[65.75]；信用一般，稍有风险；</p>
            <p>良-：[60,65]；信用欠佳，有一定风险；</p>
            <p>中+：(55.60]；信用较差，有较大风险；</p>
            <p>中：[45.55]；信用很差，风险很大；</p>
            <p>中-：[40.45]；信用太差，存在严重风险；</p>
            <p>差：[0.40]；信用极差，存在极其严重风险。</p>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="入围评分" name="rwpf">
        <div class="rating">
          <div class="rating-title">
            2024至2025年度中国生物技术股份有限公司
            非免规疫苗市场服务供应商入围遴选项目评审表
          </div>
          <div class="content">
            <div class="t-h1">
              <div class="td w150px">响应人名称</div>
              <div class="td f1">
                <el-input
                  :disabled="disabled"
                  v-model="form.targetName"
                  placeholder="请输入内容"
                ></el-input>
              </div>
              <div class="td w150px">评审日期</div>
              <div class="td w230px">
                <el-date-picker
                  class="w100"
                  :disabled="disabled"
                  v-model="form.evalTime"
                  :picker-options="pickerOptions"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </div>
            </div>
            <el-table
              :data="tableData"
              border
              style="width: 100%"
              :header-cell-style="{ 'text-align': 'center' }"
            >
              <el-table-column type="index" label="序号 " width="50" />
              <el-table-column prop="title" label="评分分项" width="100" />
              <el-table-column prop="total" label="分值" width="75" />
              <el-table-column label="评分标准">
                <template slot-scope="scope">
                  <div class="html" v-html="scope.row.info"></div>
                </template>
              </el-table-column>
              <el-table-column label="得分" width="160">
                <template slot-scope="scope">
                  <el-input-number
                    @change="inputNumberChange"
                    :disabled="disabled"
                    :min="scope.row.min"
                    :max="scope.row.max"
                    v-model="scope.row.mark"
                    placeholder="请输入得分"
                  ></el-input-number>
                </template>
              </el-table-column>
            </el-table>
            <div class="t-h1 t-b">
              <div class="td txt">
                合计
              </div>
              <div class="td w160px">{{ allMark }}</div>
            </div>
            <div class="form-b">
              <div class="form-list">
                <span>评审人签字：</span>
                <el-input
                  :disabled="disabled"
                  v-model="form.adminName"
                  placeholder="请输入内容"
                />
              </div>
              <div class="form-list">
                <span>签字日期：</span>
                <el-date-picker
                  class="w100"
                  :disabled="disabled"
                  v-model="form.signDate"
                  :picker-options="pickerOptions"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                />
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane v-if="false" label="服务结果定性评分" name="fwjg"
        >角色管理</el-tab-pane
      >
    </el-tabs>
    <span slot="footer" class="dialog-footer" v-if="activeName === 'rwpf'">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitInfo">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { qccInfoDetails } from "@/api/qcc.js";
import tableData from "./tableDate/index";
import { evalCreateApi, evalDetailApi } from "@/api/wmdaagent";

export default {
  data() {
    return {
      dialogVisible: false,
      activeName: "qcc",
      creditRatingReportGrade: {},
      marks: {
        0: "0",
        10: "10",
        20: "20",
        30: "30",
        40: "40",
        50: "50",
        60: "60",
        70: "70",
        80: "80",
        90: "90",
        100: "100"
      },
      Score: 0,
      disabled: false,
      form: {
        deptId: "",
        evalType: "admission",
        targetName: "",
        evalTime: "",
        adminName: "",
        signDate: ""
      },
      allMark: "",
      tableData: {},
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        }
      }
    };
  },
  methods: {
    showInfoFn(row) {
      if (row && row.zjNumber) {
        this.getQccInfo(row.zjNumber);
      }
      this.show(row);
      this.dialogVisible = true;
    },
    async getQccInfo(id) {
      // 91110000100010062X
      const res = await qccInfoDetails(id);
      if (res.data.code === 0 && res.data.data) {
        this.creditRatingReportGrade = res.data.data.creditRatingReportGrade;
        this.Score = Number(this.creditRatingReportGrade.Score);
      }
    },
    inputNumberChange() {
      const all = this.tableData.reduce((prev, cur) => {
        return prev + cur.mark;
      }, 0);

      this.allMark = all;
    },
    dialogClose() {
      this.form = {
        deptId: "",
        evalType: "admission",
        targetName: "",
        evalTime: "",
        adminName: "",
        signDate: ""
      };
      this.tableData.forEach(item => {
        item.mark = 0;
      });
      this.disabled = false;
    },
    show(row) {
      this.form.deptId = row && row.deptId;
      this.tableData = JSON.parse(JSON.stringify(tableData));
      if (row && row.evaluated) {
        this.detail(row.deptId);
      }
    },
    async detail(deptId) {
      const res = await evalDetailApi(deptId);
      this.tableData = JSON.parse(JSON.stringify(tableData));
      this.form.targetName = res.data.data.targetName;
      this.form.evalTime = res.data.data.evalTime;
      this.form.adminName = res.data.data.adminName;
      this.form.signDate = res.data.data.signDate;
      this.allMark = res.data.data.evalRes.mark;
      res.data.data.evalRes.items.forEach(item => {
        const index = this.tableData.findIndex(
          iten => iten.itemId == item.itemId
        );
        if (index !== -1) {
          this.tableData[index].mark = item.mark;
        }
      });
    },
    async submitInfo() {
      const flag = this.tableData.every(item => item.mark);
      const flag1 = Object.keys(this.form).every(item => !!this.form[item]);
      if (!flag || !flag1) {
        return this.$message.info("请完善信息");
      }
      const arr = this.tableData.map(item => {
        return {
          itemId: item.itemId,
          total: item.total,
          mark: item.mark
        };
      });
      this.form.items = arr;
      const res = await evalCreateApi(this.form);
      if (res.data.data) {
        this.$message.success("提交成功");
      }
      this.dialogClose();
      this.$emit("success");
    }
  }
};
</script>

<style lang="scss" scoped>
.qcc-content {
  margin-top: 10px;

  .title {
    line-height: 20px;
    font-size: 14px;
    color: #1e2024;
  }
  .score {
    margin-top: 25px;
    display: flex;
    .score-item {
      margin-right: 75px;
      .score-item-l {
        font-size: 32px;
        line-height: 45px;
        margin-right: 6px;
        color: #1f2329;
      }
      .score-item-r {
        font-weight: 400;
        font-size: 16px;
        line-height: 22px;
        color: #6e7985;
      }
    }
  }
  .rate {
    width: 80%;
    padding-left: 20px;
  }
  .tips {
    font-weight: 400;
    font-size: 14px;
    color: #6e7985;
    margin-top: 30px;
  }
  .card {
    margin-top: 18px;
    width: 100%;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    padding: 20px;
    box-sizing: border-box;

    p {
      font-weight: 400;
      font-size: 14px;
      line-height: 30px;
      color: #000000;
    }
  }
}

::v-deep .el-slider__runway.disabled .el-slider__bar {
  background: #6eb657;
}
::v-deep .el-slider__button-wrapper {
  display: none;
}
::v-deep .el-slider__marks-text {
  width: 30px;
  text-align: center;
}

.rating {
  .rating-title {
    font-weight: 600;
    color: #000;
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
  }

  .content {
    .t-h1 {
      width: 100%;
      display: flex;
      height: 50px;
      align-items: center;
      border: 1px solid #ebeef5;
      border-bottom: none;
      .td {
        padding: 0 20px;
        height: 50px;
        border-right: 1px solid #ebeef5;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .f1 {
        flex: 1;
      }
      .w150px {
        width: 150px;
      }
      .w160px {
        width: 158.5px;
      }
      .w230px {
        width: 230px;
        border-right: none;
      }
    }
    .t-b {
      border-top: none;
      display: flex;
      .td {
        justify-content: center;
        border-top: none;
        border-bottom: 1px solid #ebeef5;
      }
      .txt {
        flex: 1;
      }
    }
  }
}

.html {
  >>> table {
    border: 1px solid #ebeef5;
    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;
  }

  >>> th,
  >>> td {
    padding: 10px;
  }
  >>> tr,
  >>> th,
  >>> td {
    border: 1px solid #ebeef5;
    border-collapse: collapse;
    text-align: center;
  }
}

.form-b {
  margin-top: 10px;

  .form-list {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    width: 600px;
    span {
      margin-right: 8px;
      font-weight: 600;
      color: #4d4c4c;
      font-size: 18px;
      width: 150px;
      text-align: right;
    }
  }
}
</style>
