
<template>
  <div class="testdiv">
    <div class="divborder newSearchDiv" style="margin:0px;">
      <!-- 产线层级 -->
      <div class="filter">
        <label>{{ $t("1132") }}：</label>
        <Cascader
          :data="datalevel"
          v-model="leveldata"
          change-on-select
          trigger="click"
          class="searchSelect"
          @on-change="changelevel"
        ></Cascader>
      </div>
      <!-- 文档状态 -->
      <div class="filter">
        <label>{{ $t("1221") }}：</label>
        <Select v-model="status" clearable class="searchSelect">
          <Option
            v-for="item in docuStatusList"
            :value="item.status"
            :key="item.status"
            >{{ item.name }}</Option
          >
        </Select>
      </div>
      <div class="searchBtn">
        <Button
          type="primary"
          class="twoWord"
          icon="ios-search"
          @click="Search()"
          >{{ $t("1001") }}</Button
        >
        <Button type="success" class="twoWord" icon="md-star" @click="Sign()">{{
          $t("400091")
        }}</Button>
      </div>
    </div>
    <div class="divborder newTableDiv">
      <Table
        highlight-row
        class="tableClass"
        :data="tableData"
        :columns="tableColumns"
        @on-current-change="handleRowChange"
      ></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>
    <!-- 签收弹框 -->
    <Modal
      :title="$t(400091)"
      v-model="SignModal"
      :styles="{ width: '600px' }"
      class="newModalClass"
    >
      <div class="middle">
        <label>
          <b>{{ $t(700059) }}：</b>
        </label>
        <span>{{ this.detailobj.binding_remark }}</span>
      </div>
      <div class="middle">
        <label>
          <b>{{ $t(700058) }}：</b>
        </label>
        <Checkbox v-model="single"></Checkbox>
      </div>
      <div class="middle">
        <label>
          <b>{{ $t(700057) }}：</b>
        </label>
        <Input
          id="input1"
          type="textarea"
          v-model="record"
          maxlength="200"
          show-word-limit
          style="width: 200px"
        />
      </div>
      <div slot="footer">
        <div>
          <Button
            type="text"
            size="large"
            @click="cancel()"
            v-text="$t(1033)"
            >{{ this.$t(1033) }}</Button
          >
          <Button
            type="primary"
            size="large"
            @click="confirm()"
            v-text="$t(900552)"
            >{{ this.$t(900552) }}</Button
          >
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
// 引入APi 接口
import axios from "@/libs/api.request";
export default {
  data() {
    return {
      total: 0, // 总条数
      page: 1, // 页码
      pagesize: 10, // 一页展示多少条数据
      status: "", //  文档状态
      leveldata: [], //  产线层级插件所需数据
      datalevel: [], //  级联选择框数据
      levelid: 0, // 产线层级选中的section_id
      tableData: [], // table 表格数据
      detailobj: {},
      SignModal: false, // 隐藏
      single: false, // 默认不选中
      record: "",
      docuStatusList: [
        {
          status: 0,
          name: this.$t(1013)
        },
        {
          status: 1,
          name: this.$t(300092)
        },
        {
          status: 3,
          name: this.$t(300093)
        }
      ],
      tableColumns: [
        {
          type: "sort",
          title: this.$t("1008"),
          width: "80px",
          render: (h, params) => {
            return h(
              "span",
              params.index + (this.page - 1) * this.pagesize + 1
            );
          }
        },
        {
          title: this.$t(200038), // 工位名称
          key: "section_name"
        },
        {
          title: this.$t(900752), // 文档名称
          key: "name"
        },
        {
          title: this.$t(900560), // 关联产品
          key: "product_name"
        },
        {
          title: this.$t(100090), // 图纸号
          key: "product_drawcode"
        },
        {
          title: this.$t(930133), // 版本号
          key: "version"
        },
        {
          title: this.$t(1221), // 文档状态
          width: "120px",
          key: "status",
          render: (h, params) => {
            let statusText, statusBg;
            if (params.row.status == 1) {
              statusText = this.$t(300092);
              statusBg = "#f0ad4e";
            } else if (params.row.status == 2) {
              statusText = this.$t(300092);
              statusBg = "#f0ad4e";
            } else if (params.row.status == 3) {
              statusText = this.$t(300093);
              statusBg = "green";
            } else if (params.row.status == 4) {
              statusText = this.$t(300094);
              statusBg = "white";
            }
            return h("div", {
              style: {
                backgroundColor: statusBg,
                width: "100%",
                color:"#fff",
                height: "36px",
                lineHeight: "36px",
                textAlign: "center"
              },
              domProps: {
                innerHTML: statusText
              }
            });
          }
        },
        {
          title: this.$t(1225), // 签收人
          key: "sign_username"
        },
        {
          title: this.$t(800041), // 备注
          key: "remark"
        }
      ]
    };
  },
  created() {
    this.Search();  // 加载页面, 调用查询接口
    this.defaultPageData();
    this.status = 0; // 默认选中全部状态
    this.tableColumns = this.$time.initTableTitle(this.tableColumns);
  },
  methods: {
    defaultPageData() {
      this.initlevel(); // 初始化公司层级
    },
    initlevel() {
      // 初始化产线层级
      axios
        .request({
          url: "/config/ProjectLevelSection/GetSectionTree",
          method: "get"
        })
        .then(res => {
          if (res.data.ret === 1) {
            const arr = [];
            this.datalevel = res.data.data;
            this.leveldata = arr;
          } else {
            this.$Message.error(this.$t(res.data.msg));
          }
        });
    },
    changelevel(data) {
      this.levelid = data[data.length - 1];
    },
    // 监听搜索事件
    Search() {
      var all = 0;
      if (this.status !== null && this.status !== "") {
        all = parseInt(this.status);
      }
      let params = {
        page: this.page,
        pagesize: this.pagesize,
        section_id: this.levelid,
        status: all // 默认为0(全部)
      };
      axios
        .request({
          url: "/esop/EsopDocumentBinding/GetDocumentSignPagedList",
          params,
          method: "get"
        })
        .then(res => {
          this.total = 0; // 给定一个初始值
          this.tableData = []; // 设定一个初始值
          if (res.data.ret === 1) {
            this.total = res.data.total;
            this.tableData = res.data.data;
          } else {
            this.$Message.error(this.$t(res.data.msg));
          }
        });
    },
    // 监听签收事件
    Sign() {
      if (this.detailobj.id == undefined || this.detailobj.id == "") {
        this.$Message.warning(this.$t(1043));
        return false;
      }
      this.SignModal = true; // 弹框提示
    },
    // 签收弹框确定事件
    confirm() {
      // 判断
      if (this.single === false) {
        this.$Message.warning(this.$t(9000409));
        return false;
      }
      var data = {
        has_train: this.single ? 1 : 0, // 是否培训
        id: this.detailobj.id, // 选中项的id
        train_record: this.record // 培训记录
      };
      console.log(data);
      this.axios
        .request({
          url: "/esop/EsopDocumentBinding/SignDocument",
          data,
          method: "post"
        })
        .then(res => {
          console.log(res);
          if (res.data.ret === 1) {
            this.SignModal = false; // 隐藏
            this.$Message.success(this.$t(400075)); // 提示
            this.Search(); // 刷新
            this.single = false; // 默认状态
            this.record = ""; // 清空
          } else {
            this.$Message.error(this.$t(res.data.msg));
          }
        });
    },
    // 签收弹框取消事件
    cancel() {
      this.SignModal = false; // 隐藏
      this.single = false; // 默认状态
      this.record = ""; // 清空
    },
    // 点击当前表格时触发，可以拿到当前点击行的数据
    handleRowChange(currentRow, oldCurrentRow) {
      this.detailobj = currentRow;
    },
    // 页码改变的回调，返回改变后的页码
    changePage(value) {
      this.page = value;
      this.tableData = this.Search(this.page, this.pagesize);
    },
    // 切换每页条数时的回调，返回切换后的每页条数
    handlePageSize(value) {
      this.pagesize = value;
      this.tableData = this.Search(this.page, this.pagesize);
    }
  }
};
</script>

<style lang="less" scoped>
.middle {
  margin-bottom: 30px;
}
</style>
