<template>
  <!-- 自动指标管关联页面 -->
  <div class="testdiv">
    <div class="divborder newSearchDiv">
      <div class="filter">
        <label>{{ $t("100000") }}：</label>
        <Select
          v-model="depart"
          clearable
          class="searchSelect"
          @on-change="getkpiList(depart)"
        >
          <Option
            v-for="(item, key) in departList"
            :value="item.id"
            :key="key"
            >{{ item.title }}</Option
          >
        </Select>
      </div>
      <div class="filter">
        <label>{{ $t("950384") }}：</label>
        <Select class="searchSelect" v-model="kpiIndex" clearable>
          <Option
            v-for="(item, key) in kpiList"
            :value="item.title"
            :key="key"
            >{{ item.title }}</Option
          >
        </Select>
      </div>
      <div class="searchBtn">
        <Button
          type="primary"
          class="twoWord"
          icon="ios-search"
          @click="search(page, pagesize)"
          >{{ $t("1001") }}</Button
        >
        <Button
          type="success"
          class="twoWord"
          icon="md-add-circle"
          @click="add()"
          >{{ $t("1002") }}</Button
        >
        <Button
          type="warning"
          class="twoWord"
          icon="ios-create-outline"
          @click="edit()"
          >{{ $t("1003") }}</Button
        >
        <Button
          type="error"
          class="twoWord"
          icon="md-close-circle"
          @click="del()"
          >{{ $t("1004") }}</Button
        >
      </div>
    </div>
    <div class="divborder newTableDiv">
      <Table
        class="tableClass"
        @on-current-change="handleRowChange"
        highlight-row
        :data="tableData1"
        :columns="tableColumns1"
      ></Table>
      <div class="pageDiv">
        <div class="pageDirection">
          <Page
            :total="total"
            :current="page"
            @on-change="changePage"
            show-elevator
            show-sizer
            show-total
            @on-page-size-change="handlePageSize"
            :page-size-opts="[10, 20, 30, 40, 100]"
          ></Page>
        </div>
      </div>
    </div>

    <!-- 添加 start-->
    <Modal
      class="newModalClass"
      :title="addTitle"
      v-model="modalAdd"
      :styles="{ width: '450px' }"
    >
      <div class="modal_body">
        <!-- class="filter" (统一为div  去掉class类) -->
        <div>
          <label><i>*</i>{{ $t("100000") }}：</label>
          <Select
            v-model="depart1"
            clearable
            class="searchSelect"
            @on-change="getkpiList(depart1)"
          >
            <Option
              v-for="(item, key) in departList"
              :value="item.id"
              :key="key"
              >{{ item.title }}</Option
            >
          </Select>
        </div>
        <div>
          <label><i>*</i>{{ $t("950384") }}：</label>
          <Select v-model="kpiIndex1" clearable class="searchSelect">
            <Option
              v-for="(item, key) in kpiList"
              :value="item.title"
              :key="key"
              >{{ item.title }}</Option
            >
          </Select>
        </div>
        <div>
          <label><i>*</i>{{ $t(100395) }}：</label>
          <Cascader
            :data="tongdaolist"
            :value="leveldata"
            v-model="sectionidsearch"
            trigger="hover"
            change-on-select
            @on-change="loadPositionSearch"
            class="searchInput"
          ></Cascader>
        </div>

        <div>
          <label><i>*</i>{{ $t(90000061) }}：</label>

          <Select v-model="autoindex" label-in-value class="searchSelect">
            <Option :value="1" v-text="$t('900999')">OEE</Option>
            <!-- <Option :value="2" v-text="$t('5000045')">准时交付率</Option>
            <Option :value="3" v-text="$t('5000046')">客户投诉数</Option>
            <Option :value="4" v-text="$t('5000047')">零事故天数</Option> -->
            <Option :value="5" v-text="$t('500125')">{{ $t("500125") }}</Option>
            <!-- <Option :value="6" v-text="$t('500109')">实际产量</Option>
            <Option :value="7" v-text="$t('500123')">合格率</Option>
            <Option :value="8" v-text="$t('5000048')">报废率</Option>
            <Option :value="9" v-text="$t('5000049')">返工数</Option>
            <Option :value="10" v-text="$t('5000050')">OEE八大损失分布</Option> -->
          </Select>
        </div>
        <div>
          <label><i>*</i>{{ $t(90000062) }}：</label>
          <!-- <label>日</label> -->
          <Select v-model="rate" label-in-value class="searchSelect">
            <!-- <Option :value="1" v-text="$t(1142)">年</Option>
            <Option :value="2" v-text="$t(1140)">季</Option>
            <Option :value="3" v-text="$t(1138)">月</Option>
            <Option :value="4" v-text="$t(1136)">周</Option> -->
            <Option :value="5" v-text="$t(900864)">{{ $t(900864) }}</Option>
          </Select>
        </div>
      </div>

      <div slot="footer">
        <Button type="text" size="large" @click="modalAdd = false">{{
          $t("1033")
        }}</Button>
        <Button type="primary" size="large" @click="addPost">{{
          $t("1011")
        }}</Button>
      </div>
    </Modal>
    <!-- 添加 end-->

    <!-- 编辑 start-->
    <Modal
      class="newModalClass"
      :title="editTitle"
      v-model="modalEdit"
      :styles="{ width: '400px' }"
    >
      <!-- class="filter" 统一为div 标签出去class类 -->
      <div class="modal_body">
        <div>
          <label><i>*</i>{{ $t("100000") }}：</label>
          <Select
            v-model="depart1"
            clearable
            class="searchSelect"
            @on-change="getkpiList(depart1)"
          >
            <Option
              v-for="(item, key) in departList"
              :value="item.id"
              :key="key"
              >{{ item.title }}</Option
            >
          </Select>
        </div>
        <div>
          <label><i>*</i>{{ $t("950384") }}：</label>
          <Select v-model="kpiIndex1" clearable class="searchSelect">
            <Option
              v-for="(item, key) in kpiList"
              :value="item.title"
              :key="key"
              >{{ item.title }}</Option
            >
          </Select>
        </div>
        <div>
          <label><i>*</i>{{ $t(100395) }}：</label>
          <Cascader
            :data="tongdaolist"
            :value="leveldata"
            v-model="sectionidsearch"
            trigger="hover"
            @on-change="loadPositionSearch"
            change-on-select
            class="searchInput"
          ></Cascader>
        </div>

        <div>
          <label><i>*</i>{{ $t(90000061) }}：</label>
          <!-- <Select v-model="autoindex" clearable style="width:160px;">
            <Option v-for="(item,key) in autoList" :value="item.id" :key="key">{{ item.dkey }}</Option>
          </Select> -->
          <Select v-model="autoindex" label-in-value class="searchSelect">
            <Option :value="1" v-text="$t('900999')">OEE</Option>
            <!-- <Option :value="2" v-text="$t('5000045')">准时交付率</Option>
            <Option :value="3" v-text="$t('5000046')">客户投诉数</Option>
            <Option :value="4" v-text="$t('5000047')">零事故天数</Option> -->
            <Option :value="5" v-text="$t('500125')">{{ $t("500125") }}</Option>
            <!-- <Option :value="6" v-text="$t('500109')">实际产量</Option>
            <Option :value="7" v-text="$t('500123')">合格率</Option>
            <Option :value="8" v-text="$t('5000048')">报废率</Option>
            <Option :value="9" v-text="$t('5000049')">返工数</Option>
            <Option :value="10" v-text="$t('5000050')">OEE八大损失分布</Option> -->
          </Select>
        </div>
        <div>
          <label><i>*</i>{{ $t(90000062) }}：</label>
          <!-- <label>日</label> -->
          <Select v-model="rate" label-in-value class="searchSelect">
            <!-- <Option :value="1" v-text="$t(1142)">年</Option>
            <Option :value="2" v-text="$t(1140)">季</Option>
            <Option :value="3" v-text="$t(1138)">月</Option>
            <Option :value="4" v-text="$t(1136)">周</Option> -->
            <Option :value="5" v-text="$t(900864)">{{ $t(900864) }}</Option>
          </Select>
        </div>
      </div>
      <div slot="footer">
        <Button type="text" size="large" @click="modalEdit = false">{{
          $t("1033")
        }}</Button>
        <Button type="primary" size="large" @click="editPost">{{
          $t("1011")
        }}</Button>
      </div>
    </Modal>
    <!-- 编辑 end-->
  </div>
</template>

<script>
import axios from "@/libs/api.request";
export default {
  // name: 'tree_select_page',
  components: {},
  data() {
    return {
      headers: {
        // 上传请求头添加
        token: localStorage.getItem("token"),
        timestamp: localStorage.getItem("timestamp"),
        nonce: localStorage.getItem("nonce"),
        sign: localStorage.getItem("sign")
      },
      addTitle: this.$t(1002),
      editTitle: this.$t(1003),
      action:
        axios.publicPath + "kpi/upload/UploadExcel?templateName=KpiTaskAct",
      tableData1: [], // 列表数据
      depart: 0, // 部门
      departList: [], // 部门列表
      kpiIndex: "", // kpi指标
      modalAdd: false, // 添加弹窗
      modalEdit: false, // 编辑弹窗
      depart1: 0, // 添加-部门
      kpiIndex1: "", // 添加-kpi指标
      page: 1,
      pagesize: 10,
      total: 0,
      obj: {}, // 选中行
      tableColumns1: [
        {
          type: "index2",
          title: this.$t(1008),
          key: "xuhao",
          render: (h, params) => {
            return h(
              "span",
              params.index + (this.page - 1) * this.pagesize + 1
            );
          },
          width: 60,
          align: "center"
        },
        {
          title: this.$t(100000),
          key: "depart",
          align: "center"
        },
        {
          title: this.$t(950384),
          key: "kpiValue",
          align: "center"
        },
        {
          title: this.$t(90000063),
          key: "cycleDesc",
          align: "center"
        },
        {
          title: this.$t(90000014),
          key: "linePosition",
          align: "center"
        },
        {
          title: this.$t(90000061),
          key: "autoDesc",
          align: "center"
        },
        {
          title: this.$t(90000062),
          key: "interval",
          align: "center"
        },
        {
          title: this.$t(920139),
          key: "user",
          align: "center"
        },
        {
          title: this.$t(920138),
          key: "time",
          align: "center"
        }
      ],
      defaultDepart: 0,
      tongdaolist: [],
      level: 0, // 层级
      kpiList: [],
      kpiItemListAdd: [],
      kpiItemListEdit: [],
      autoList: [],
      autoindex: 0, // 自动指标
      rate: 5,
      leveldata: [],
      sectionidsearch: []
    };
  },
  created() {
    this.getDepartList(); // 获取部门
    // this.getkpiList();
    this.search(this.page, this.pagesize);
    this.getTongdaoList();
    this.getautoList();
    // 格式化表格样式
    this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1);
  },
  methods: {
    // 获取部门
    getDepartList() {
      axios
        .request({
          url: "/config/ProjectUser/getUserDepartment",
          method: "get"
        })
        .then(res => {
          this.departList = [];
          if (res.data.ret === 1) {
            if (res.data.data.length !== 0) {
              this.departList = res.data.data;
            }
          }
        });
    },
    getkpiList(section) {
      axios
        .request({
          url: "/kpi/ItemDisplay/GetItem?section=" + section,
          method: "get"
        })
        .then(res => {
          if (res.data.ret === 1) {
            console.log(res.data.data);
            this.kpiList = res.data.data;
          }
        });
    },
    getTongdaoList() {
      axios
        .request({
          url: "config/ProjectLevelSection/GetSectionTree",
          method: "get"
        })
        .then(res => {
          const arr = [];
          this.tongdaolist = res.data.data;
          arr.push(res.data.data[0].value);
          this.leveldata = arr;
        });
    },
    // 获取自动指标
    getautoList() {
      axios
        .request({
          url: "/config/dict/GetDictByCat?cat=autoindex",
          method: "get"
        })
        .then(res => {
          if (res.data.ret === 1) {
            // console.log(res.data);
            this.autoList = res.data.data;
          }
        });
    },
    loadPositionSearch(v) {
      // console.log(v);
    },
    search(page, pagesize) {
      var params = {
        pagesize: this.pagesize,
        page: this.page,
        section: this.depart,
        item: this.kpiIndex
      };
      axios
        .request({
          url: "/kpi/AutoCalculation/Getlist",
          params,
          method: "get"
        })
        .then(res => {
          if (res.data.ret === 1) {
            this.total = res.data.total;
            console.log(res.data.data);
            this.mockTableData1(res.data.data);
          }
        });
    },
    mockTableData1(tablelist) {
      let data = [];
      tablelist.forEach(item => {
        if (item) {
          var enable = item.enable === 1 ? this.$t(1000020) : this.$t(1000021);
          var condition =
            item.condition === "0" ? this.$t(950388) : this.$t(950389);
          data.push({
            depart: item.sectionDesc, // 部门
            kpiValue: item.itemDesc, // kpi
            targetValue: item.targetVal,
            cycle: item.cycle, // 指标周期
            cycleDesc: item.cycleDesc,
            line: item.line, // 通道层级
            linePosition: item.linePosition,
            autoDesc: item.autoDesc,
            autokey: item.autoKey,
            interval: item.interval,
            user: item.user,
            time: item.datetime,
            section: item.section,
            id: item.id,
            item: item.item
          });
        }
      });
      this.tableData1 = data;
    },
    // 弹窗
    add() {
      // this.divList = [];
      // for (var i = 0; i < 12; i++) {
      //   var arr = {
      //     section: "",
      //     item: "",
      //     position: i + 1,
      //     color: "",
      //     itemDesc: ""
      //   };
      //   this.divList.push(arr);
      // }
      // 清除数据
      this.depart1 = 0;
      this.kpiIndex1 = 0;
      this.sectionidsearch = [];
      this.autoindex = 0;
      this.modalAdd = true;
    },
    // 添加-提交
    addPost() {
      if (
        this.depart1 === "" ||
        this.kpiIndex1 === "" ||
        this.sectionidsearch.length == 0 ||
        this.autoindex === ""
      ) {
        this.$Message.error(this.$t("600652"));
        return false;
      }

      var data = {
        section: this.depart1,
        item: this.kpiIndex1,
        line: this.sectionidsearch[this.sectionidsearch.length - 1],
        autokey: this.autoindex,
        cycle: this.rate
      };
      console.log(data);
      axios
        .request({
          url: "/kpi/AutoCalculation/add",
          data,
          method: "post"
        })
        .then(res => {
          console.log(res.data);
          if (res.data.ret === 1) {
            this.$Message.success(this.$t("1055"));
            this.search(this.page, this.pagesize);
            this.modalAdd = false;
          } else {
            this.$Message.error(this.$t(res.data.msg));
          }
        });
    },
    // 编辑
    edit() {
      if (this.obj.id === "" || this.obj.id === undefined) {
        this.$Message.error(this.$t("1017"));
        return false;
      } else {
        console.log(this.obj);

        this.depart1 = this.obj.section;
        this.getkpiList(this.depart1);
        this.kpiIndex1 = this.obj.itemDesc;
        this.level = this.obj.line;
        this.autoindex = this.obj.autokey;
        this.modalEdit = true;
        // this.rate = this.obj.cycle;
      }
    },
    // 编辑提交
    editPost() {
      if (
        this.depart1 === "" ||
        this.kpiIndex1 === "" ||
        this.level === "" ||
        this.autoindex === ""
      ) {
        this.$Message.error(this.$t("600652"));
        return false;
      }

      var data = {
        id: this.obj.id,
        section: this.depart1,
        item: this.kpiIndex1,
        line: this.level,
        autokey: this.autoindex,
        cycle: this.rate
      };

      axios
        .request({
          url: "/kpi/AutoCalculation/Modify",
          data,
          method: "post"
        })
        .then(res => {
          console.log(res.data);
          if (res.data.ret === 1) {
            this.$Message.success(this.$t("1055"));
            this.search(this.page, this.pagesize);
            this.modalEdit = false;
          } else {
            this.$Message.error(this.$t(res.data.msg));
          }
        });
    },
    // 删除
    del() {
      if (this.obj.id === "" || this.obj.id === undefined) {
        this.$Message.error(this.$t("1017"));
        return false;
      } else {
        axios
          .request({
            url: "/kpi/AutoCalculation/del?id=" + this.obj.id,
            method: "get"
          })
          .then(res => {
            if (res.data.ret === 1) {
              this.$Message.success(this.$t("1058"));
              this.search(this.page, this.pagesize);
            } else {
              this.$Message.error(this.$t(res.data.msg));
            }
          });
      }
    },
    handleRowChange(currentRow, oldCurrentRow) {
      this.obj = currentRow; // 选中行
      this.getkpiList(this.obj.section);
    },
    handlePageSize(value) {
      this.pagesize = value;
      this.tableData1 = this.search(this.page, this.pagesize);
    },
    changePage(value) {
      this.page = value;
      this.tableData1 = this.search(this.page, this.pagesize);
    },

    // 时间戳转换成时间
    timestampToTime(timeStampe) {
      var date = new Date(timeStampe); // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      var h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    }
  }
};
</script>
<style lang="less" scoped>
.testdiv {
  width: 100%;
  height: 100%;
}

.classButton {
  button {
    margin: 5px 5px;
  }
}

.filter {
  padding: 5px;
  height: 40px;
  text-align: left;
  label {
    display: inline-block;
    width: auto;
  }
}

.bodyModel {
  height: 400px;
}
.bodyModel .divLeft {
  border: 1px solid #ddd;
  width: 300px;
  float: left;
}
.bodyModel .divTop {
  border-bottom: 1px solid #ddd;
  height: 50px;
  color: #2d8cf0;
  line-height: 50px;
  padding: 0px 10px;
}
.bodyModel .leftMiddle {
  border-bottom: 1px solid #ddd;
  height: 130px;
  padding: 10px;
}
.bodyModel .leftButtom {
  height: 245px;
  padding: 10px;
}
.bodyModel .divRight {
  border: 1px solid #ddd;
  width: 465px;
  float: left;
  padding: 0;
}
.bodyModel .rightTop {
  padding: 3px;
}
.bodyModel .filter {
  label {
    display: inline-block;
    width: 100px;
  }
}
.filter .iClass {
  color: red;
  display: inline-block;
  width: 8px;
}
.bodyModel .filter .ivu-input-small {
  width: 135px;
}
.bodyModel .divRight .divScreen {
  width: 114px;
  height: 114px;
  border: 1px solid #ddd;
  float: left;
  cursor: pointer;
  color: #fff;
  text-align: center;
  line-height: 114px;
}
.bodyModel .divRight .isActive {
  border: 3px solid #2d8cf0;
}
.modal_body div {
  margin-bottom: 8px;
}
</style>
