<template>
  <div class="testdiv">
    <div class="divborder newSearchDiv">
      <!-- 搜索条件--程序号 -->
      <div class="filter">
        <label>程序号：</label>
        <Input class="searchInput" v-model="programNo" />
      </div>
      <!-- 搜索条件--产品名称 -->
      <div class="filter">
        <label>产品名称：</label>
        <Select v-model="productName" clearable filterable class="searchSelect">
          <Option v-for="v in productList" :value="v.name" :key="v.id"
            >{{ v.name }}({{ v.code }})
          </Option>
        </Select>
      </div>
      <!-- 搜索条件--审核状态 -->
      <div class="filter">
        <label>审核状态：</label>
        <Select v-model="auditStatus" clearable class="searchSelect">
          <Option :value="1">待审核</Option>
          <Option :value="2">已审核</Option>
          <Option :value="3">被拒绝</Option>
        </Select>
      </div>
      <!-- 按钮组 -->
      <div class="searchBtn">
        <!-- 查询 -->
        <Button
          type="primary"
          class="twoWord"
          icon="ios-search"
          @click="search()"
        >
          查询
        </Button>
        <!-- 审核 -->
        <Button
          type="primary"
          class="twoWord"
          icon="md-add-circle"
          @click="audit()"
        >
          审核
        </Button>
        <!-- 下载 -->
        <Button
          type="primary"
          class="twoWord"
          icon="md-download"
          @click="download()"
        >
          下载
        </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.sync="page"
            :page-size="pagesize"
            show-elevator
            show-sizer
            show-total
            @on-change="handlePage"
            @on-page-size-change="handlePageSize"
            :page-size-opts="[10, 20, 30, 40, 100]"
          >
          </Page>
        </div>
      </div>
    </div>
    <!-- 程序预览弹框 -->
    <Modal
      class="newModalClass echo_wrap"
      v-model="previewModal"
      :width="900"
      footer-hide
    >
      <p slot="header">
        <span> 程序预览 </span>
      </p>
      <div class="modal_body">
        <Tabs value="0" type="card">
          <TabPane label="主程序（O0054）" name="0">
            <textarea class="echo_textarea" :value="programContent"></textarea>
          </TabPane>
          <TabPane label="主程序（O0054）" name="1">
            <textarea class="echo_textarea" :value="programContent"></textarea>
          </TabPane>
          <TabPane label="主程序（O0054）" name="2">
            <textarea class="echo_textarea" :value="programContent"></textarea>
          </TabPane>
          <TabPane label="主程序（O0054）" name="3">
            <textarea class="echo_textarea" :value="programContent"></textarea>
          </TabPane>
        </Tabs>
      </div>
    </Modal>
    <!-- 审核弹框 -->
    <Modal class="newModalClass echo_wrap" v-model="auditModal" :width="500">
      <p slot="header">
        <span>审核</span>
      </p>
      <div class="modal_body">
        <div class="echo_row">
          <p class="echo_tip" v-if="checkStatus == 1">
            请确认程序内容是否符合通过条件，审核通过后，程序可以下载至NC使用。
          </p>
          <p class="echo_tip" v-else>
            该程序号存在已审核记录，审核通过后老的记录将被覆盖，请确认是否审核通过。
          </p>
        </div>
        <div class="echo_row">
          <span class="echo_label">备注：</span>
          <Input v-model="auditRemark" />
        </div>
      </div>
      <div slot="footer">
        <Button size="large" @click="confirmAudit(2)">不通过</Button>
        <Button size="large" type="primary" @click="confirmAudit(1)">
          通过
        </Button>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 搜索条件--程序号
      programNo: "",
      // 搜索条件--产品名称
      productName: "",
      // 产品下拉列表
      productList: [],
      // 审核人员下拉列表
      userList: [],
      // 搜索条件--审核状态
      auditStatus: "",
      // 页码，页距，总计
      page: 1,
      pagesize: 10,
      total: 0,
      // 表格数据
      tableData: [],
      // 当前选中行
      row: {},
      // 表格列字段
      tableColumns: [
        {
          type: "sort",
          title: "序号",
          render: (h, params) => {
            return h(
              "span",
              params.index + (this.page - 1) * this.pagesize + 1
            );
          },
          width: 75,
          align: "center",
        },
        {
          title: "操作",
          width: 80,
          align: "center",
          render: (h, params) => {
            const _this = this;
            return h(
              "div",
              {
                style: {
                  textAlign: "center",
                  color: "#2D8CF0",
                  cursor: "pointer",
                },
                on: {
                  click: () => {
                    console.log(params.row);
                    _this.previewModal = true;
                  },
                },
              },
              "预览"
            );
          },
        },
        {
          title: "主程序号",
          key: "program_code",
        },
        {
          title: "产品名称",
          key: "productname",
        },
        {
          title: "产品图纸号",
          key: "code",
        },
        {
          title: "工序名称",
          key: "",
        },
        {
          title: "主程序文件名",
          key: "file_name",
          width: 120,
          align: "center",
        },
        {
          title: "创建人",
          key: "createname",
          width: 85,
          align: "center",
        },
        {
          title: "创建时间",
          key: "createtime",
          width: 150,
          align: "center",
        },
        {
          title: "创建备注",
          key: "create_remark",
          width: 90,
          align: "center",
        },
        {
          title: "审核人",
          key: "checkname",
          width: 85,
          align: "center",
        },
        {
          title: "审核时间",
          key: "checktime",
          width: 150,
          align: "center",
        },
        {
          title: "审核结果",
          key: "checkinfo",
          width: 90,
          align: "center",
        },
        {
          title: "审核备注",
          key: "check_remark",
          width: 90,
          align: "center",
        },
        {
          title: "子程序个数",
          key: "",
        },
        {
          title: "版本号",
          key: "program_version",
        },
        {
          title: "状态",
          align: "center",
          width: 90,
          render: (h, params) => {
            let bg, text;
            let status = params.row.checkstatus;
            switch (status) {
              case 1:
                text = "待审核";
                bg = "#FFFF00";
                break;
              case 2:
                text = "已审核";
                bg = "#00FF00";
                break;
              case 3:
                text = "被拒绝";
                bg = "#FF0000";
                break;
            }
            return h("div", {
              domProps: {
                innerHTML: text,
              },
              style: {
                backgroundColor: bg,
                width: "100%",
                height: "36px",
                lineHeight: "36px",
                textAlign: "center",
              },
            });
          },
        },
      ],
      // 程序内容
      programContent: "",
      // 预览弹框是否弹出
      previewModal: false,
      // 审核弹框是否弹出
      auditModal: false,
      // 审核备注
      auditRemark: "",
      // 当前行审核状态
      checkStatus: 1,
    };
  },
  mounted() {
    // 格式化表格样式
    this.tableColumns = this.$time.initTableTitle(this.tableColumns);
    // 获取产品下拉列表
    this.getProductList();
    // 获取审核人员下拉列表
    this.getUserList();
    // 初始化查询
    this.search();
  },
  methods: {
    // 获取产品下拉列表
    getProductList() {
      const _this = this;
      _this.axios
        .request({
          url: "/config/ProjectProduct/GetProductsByCode?code=&name=&count=50",
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            let data = result.data;
            _this.productList = [];
            if (data && Array.isArray(data) && data.length) {
              _this.productList = data;
            }
          } else {
            _this.$Message.error(_this.$t(result.msg));
          }
        });
    },
    // 查询
    search() {
      const _this = this;
      let { programNo, productName, auditStatus, page, pagesize } = this;
      let params = {
        programcode: programNo,
        product_name: productName,
        checkstatus: auditStatus ? auditStatus : 0,
        page,
        pagesize,
      };
      _this.axios
        .request({
          url: "/dnc/DncPgCreate/GetProgramLists",
          params,
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            _this.total = result.total;
            _this.tableData = [];
            let data = result.data;
            if (data && Array.isArray(data) && data.length) {
              _this.tableData = data;
            }
          } else {
            _this.$Message.error(_this.$t(result.msg));
          }
        });
    },
    // 监听表格当前选中行
    handleRowChange(cur) {
      this.row = cur;
    },
    // 监听页码变化
    handlePage(v) {
      this.page = v;
      this.search();
    },
    // 监听页距变化
    handlePageSize(v) {
      this.pagesize = v;
      this.search();
    },
    // 获取审核人员下拉列表
    getUserList() {
      const _this = this;
      _this.axios
        .request({
          url: "/dnc/DncPgCreate/GetCheckUsers",
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            let data = result.data;
            _this.userList = [];
            if (data && Array.isArray(data) && data.length) {
              _this.userList = data;
            }
          } else {
            _this.$Message.error(_this.$t(result.msg));
          }
        });
    },
    // 下载方法
    funDownload(content, filename) {
      // 创建隐藏的可下载链接
      var eleLink = document.createElement("a");
      eleLink.download = filename;
      eleLink.style.display = "none";
      // 字符内容转变成blob地址
      var blob = new Blob([content]);
      eleLink.href = URL.createObjectURL(blob);
      // 触发点击
      document.body.appendChild(eleLink);
      eleLink.click();
      // 然后移除
      document.body.removeChild(eleLink);
    },
    // 点击下载
    download() {
      const _this = this;
      let { row, $t } = this;
      if (JSON.stringify(row) == "{}") {
        _this.$Message.error($t(1043));
        return false;
      }
      if (!row.file_url) {
        _this.$Message.error($t(9000147));
        return false;
      }
      let params = {
        file_url: row.file_url,
        filename: row.file_name,
      };
      let arr = row.file_name.split(".");
      let type = arr[arr.length - 1];

      if (type == "zip") {
        _this.axios
          .request({
            url: "/dnc/DncPgCreate/GetContentDownload",
            params,
            method: "get",
          })
          .then((res) => {
            let result = res.data;
            if (result.ret == 1) {
              window.location.href = _this.axios.publicPath + result.data;
            } else {
              _this.$Message.error($t(result.msg));
            }
          });
      } else {
        _this.axios
          .request({
            url: "/dnc/DncPgCreate/getContent",
            params,
            method: "get",
          })
          .then((res) => {
            let result = res.data;
            if (result.ret == 1) {
              let data = result.data;
              let content = data.content;
              content = content.replace(/\n/g, "\r\n");
              _this.funDownload(content, row.file_name);
            } else {
              _this.$Message.error($t(result.msg));
            }
            return false;
          });
      }
    },
    // 点击审核
    audit() {
      const _this = this;
      let { row, $t } = this;
      if (JSON.stringify(row) == "{}") {
        _this.$Message.error($t(1043));
        return false;
      }
      let checkStatus = row.checkstatus;
      _this.checkStatus = checkStatus;
      _this.auditModal = true;
    },
    // 确认审核
    confirmAudit(isAgree) {
      const _this = this;
      let { row, auditRemark } = this;
      console.log(isAgree, auditRemark);
      _this.auditRemark = "";
      _this.$Message.success("操作成功");
      _this.auditModal = false;
    },
  },
};
</script>

<style lang="less" scoped>
.echo_label {
  font-size: 14px;
  margin-bottom: 5px;
  display: inline-block;
}
.echo_tip {
  font-size: 14px;
  margin-bottom: 12px;
}
.echo_textarea::-webkit-scrollbar {
  width: auto;
}
.echo_textarea {
  font-size: 14px;
  white-space: nowrap;
  overflow: scroll;
  resize: none;
  width: 100%;
  height: 444px;
}
.demo-spin-icon-load {
  animation: ani-demo-spin 1s linear infinite;
}
.ivu-input-word-count {
  text-align: center;
  position: absolute;
  right: 7px;
  bottom: 2px;
  padding-left: 7px;
  background: #fff;
  z-index: 1;
  display: inline-flex;
  color: #808695;
  font-size: 12px;
}
</style>
