<template>
  <div class="app-container">
    <!-- 评估筛选条件 -->
    <el-form inline>
      <el-form-item label="应用选择">
        <zx-app-select v-model="pkg" all></zx-app-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getAssessList">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 评估信息表格 -->
    <zx-table :table-list="tableData" :header="header"></zx-table>
    <!-- 弹窗修改信息 -->
    <el-dialog
      title="考核值编辑"
      :visible.sync="showEdit"
      :before-close="handleClose"
      class="edit-diallog"
      top="1vh"
      width="80%"
      :close-on-click-modal="false"
      center
    >
      <!-- 编辑内容组件 -->
      <edit-content :data="editCondition"></edit-content>
      <div slot="footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="submitEdit">确认</el-button>
      </div>
    </el-dialog>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.page"
      :page-sizes="[10, 20, 30, 40, 50, 60, 80, 100]"
      :page-size="pageInfo.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
    >
    </el-pagination>
  </div>
</template>

<script>
import ZxAppSelect from "@/components/AppSelect";
import EditContent from "./components/EditContent";
import { putAssessGetListV2, putAssessEditSaveV2 } from "@/api/report.js";

export default {
  components: {
    ZxAppSelect,
    EditContent
  },
  data() {
    //表格操作按钮
    let opertion = (h, data) => {
      return (
        <span>
          <el-button
            type="primary"
            size="mini"
            onClick={() => {
              this.modifyAssess(data);
            }}
          >
            编辑
          </el-button>
          <el-button
            type="primary"
            size="mini"
            onClick={() => {
              this.modifyAssessHistory(data);
            }}
          >
            修改记录
          </el-button>
        </span>
      );
    };
    //相同参数
    let editNum = {
      pkg: "",
      moduleId: "", //块的顺序 1 2 3 4
      indexOneMin: 0, //参考值1 下限
      indexOneMax: 0, //考核值2 上限
      indexTwoStopMin: 0, // 关停出价 参考值2
      indexTwoStopMax: 0,
      indexTwoReduceMin: 0, // 降低出价
      indexTwoReduceMax: 0,
      indexTwoContinueMin: 0, // 持续放量
      indexTwoContinueMax: 0,
      indexTwoUpMin: 0, //提升出价
      indexTwoUpMax: 0
    };
    return {
      pkg: "", //选择的应用
      header: [
        { prop: "label", label: "应用名称" },
        { prop: "platformName", label: "平台" },
        {
          label: "配置状态",
          formatter: row => {
            return row.checkIndexV2.length ? "配置已生效" : "未配置";
          }
        },
        { prop: "datadate", label: "最后生效时间" },
        { prop: "realName", label: "最后配置人" },
        { label: "操作", render: opertion }
      ], //表头
      tableData: [], //表格数据
      showEdit: false, //编辑窗口弹出控制
      editCondition: {
        pkgName: "", //应用名字
        platformName: "", //平台
        editData: [
          { ...editNum },
          { ...editNum },
          { ...editNum },
          { ...editNum }
        ] //编辑体
      }, //编辑体内参数
      pageInfo: {
        total: 180,
        page: 1,
        size: 20
      } //默认的分页信息
    };
  },
  mounted() {
    this.getAssessList(); //获取数据
  },
  methods: {
    /**
     * 获取数据
     */
    getAssessList() {
      let params = {
        pkg: this.pkg[1],
        page: this.pageInfo.page,
        size: this.pageInfo.size
      };
      putAssessGetListV2(params).then(res => {
        if (res.status == 200) {
          if (res.result.data.length == 0) {
            this.$message.info("没有查询到数据！");
          }
          this.tableData = res.result.data;
        } else {
          this.$message.error(`请求出错，错误${res.status}`);
          console.error(res);
        }
      });
    },
    /**
     * 编辑配置 点击编辑前处理
     */
    modifyAssess(data) {
      this.showEdit = true;
      let edit = this.editCondition;
      let row = data.row;
      edit.pkgName = row.label; //应用名称
      edit.platformName = row.platformName; //平台
      //有数据就回显
      if (row.checkIndexV2 && row.checkIndexV2.length > 0) {
        this.editCondition.editData.map((itm, idx) => {
          //找到对应模块
          let tmp = row.checkIndexV2.filter(k => {
            return k.moduleId == idx + 1;
          });
          //数据不对的时候兼容
          tmp = tmp && tmp.length ? tmp[0] : {};
          //给对模块对应的参数赋值
          Object.keys(itm).forEach(key => {
            itm[key] = tmp[key];
          });
        });
      }
      //填写区块数据 和 包名字
      edit.editData.map((itm, index) => {
        itm.pkg = row.value;
        itm.moduleId = index + 1;
      });
    },
    /**
     * 提交编辑
     */
    submitEdit() {
      putAssessEditSaveV2(this.editCondition.editData).then(res => {
        if (res.status == 200) {
          this.$message.success("编辑成功！");
          this.handleClose();
          this.getAssessList();
        } else {
          this.$message.error(`编辑失败，错误${res.status}`);
          console.error(res);
        }
      });
    },
    /**
     * 修改记录
     */
    modifyAssessHistory(data) {
      this.$message.info("功能待开发！！！");
    },
    /**
     * 弹窗关闭
     */
    handleClose() {
      this.showEdit = false;
      let editNum = {
        pkg: "",
        moduleId: "", //块的顺序 1 2 3 4
        indexOneMin: 0, //参考值1 下限
        indexOneMax: 0, //考核值2 上限
        indexTwoStopMin: 0, // 关停出价 参考值2
        indexTwoStopMax: 0,
        indexTwoReduceMin: 0, // 降低出价
        indexTwoReduceMax: 0,
        indexTwoContinueMin: 0, // 持续放量
        indexTwoContinueMax: 0,
        indexTwoUpMin: 0, //提升出价
        indexTwoUpMax: 0
      }; //相同参数
      this.editCondition = {
        pkgName: "", //应用名字
        platformName: "", //平台
        editData: [
          { ...editNum },
          { ...editNum },
          { ...editNum },
          { ...editNum }
        ]
      }; //编辑体内参数
    },
    /**
     * 分页条数
     */
    handleSizeChange(size) {
      this.pageInfo.size = size;
      this.getAssessList();
    },
    /**
     * 分页页数
     */
    handleCurrentChange(page) {
      this.pageInfo.page = page;
      this.getAssessList();
    }
  }
};
</script>

<style>
.edit-diallog .el-col {
  margin-bottom: 5px;
}
/* 这里直接修改了dialog，因为其他页面也修改这里了，会互相影响，巨坑 */
.el-dialog__body {
  width: 100%;
}
</style>
