<template>
  <div>
    <div class="divborder">
      <div style="display: flex">
        <!-- 左侧 -->
        <div class="box" style="border-right: none">
          <!-- 左侧按钮组 -->
          <div class="tabbox">
            <div
              class="tab"
              v-for="(item, index) in tabList"
              :key="index"
              :class="{ active: index == tab }"
              @click="active(index)"
            >
              {{ item }}
            </div>
          </div>
          <div class="contentBox">
            <!-- 设备中 -->
            <div v-show="tab == 0" style="height: 100%">
              <div class="tree">
                <Tree
                  :data="treeList"
                  ref="tree"
                  @on-select-change="getSectionid()"
                  style="width: 100%"
                ></Tree>
              </div>
              <div class="table1">
                <Table
                  :columns="columns1"
                  :data="data1"
                  highlight-row
                  @on-current-change="handleRowChange"
                >
                </Table>
                <div style="margin: 10px; overflow: hidden">
                  <Page
                    :total="total"
                    :current.sync="page"
                    :page-size="pagesize"
                    :page-size-opts="[10, 20, 30, 40, 100]"
                    show-elevator
                    show-sizer
                    show-total
                    @on-change="changePage(1, $event)"
                    @on-page-size-change="handlePageSize(1, $event)"
                  >
                  </Page>
                </div>
              </div>
            </div>
            <!-- 已审核 -->
            <div v-show="tab == 1" class="tab2">
              <div>
                <div class="filter" style="line-height: 40px">
                  <Input
                    v-model="programcode"
                    placeholder="程序号/产品名称"
                    style="width: 200px"
                  />
                </div>
                <Button
                  type="primary"
                  icon="ios-search"
                  @click="getCheckedList(1, 10, 1)"
                >
                  查询
                </Button>
              </div>
              <div>
                <Table
                  highlight-row
                  :columns="columns2"
                  :data="data2"
                  @on-row-dblclick="handleRowChange"
                >
                </Table>
                <div style="margin: 10px; overflow: hidden; text-align: right">
                  <Page
                    :total="total2"
                    :current.sync="page2"
                    :page-size="pagesize2"
                    :page-size-opts="[10, 20, 30, 40, 100]"
                    show-elevator
                    show-sizer
                    show-total
                    @on-change="changePage(2, $event)"
                    @on-page-size-change="handlePageSize(2, $event)"
                  >
                  </Page>
                </div>
              </div>
            </div>
            <!-- 修改记录 -->
            <div v-show="tab == 2" style="height: 100%">
              <div>
                <div class="inline">
                  <label>日期范围</label>:
                  <DatePicker
                    type="daterange"
                    format="yyyy-MM-dd"
                    :value="index_time"
                    style="width: 180px"
                    @on-change="getDate"
                  ></DatePicker>
                </div>
                <div class="inline" style="line-height: 40px">
                  <label>程序号</label>:
                  <Input v-model="code" style="width: 160px" />
                </div>
                <Button
                  type="primary"
                  icon="ios-search"
                  @click="getHistory(1, 10, 1)"
                >
                  查询
                </Button>
              </div>
              <div class="tree2">
                <Tree
                  :data="treeList"
                  ref="tree"
                  @on-select-change="getSectionid()"
                  style="width: 84%"
                >
                </Tree>
              </div>
              <div class="table2">
                <Table
                  highlight-row
                  :columns="columns3"
                  :data="data3"
                  @on-current-change="handleRowChange"
                >
                </Table>
                <div style="margin: 10px; overflow: hidden; text-align: right">
                  <Page
                    :total="total3"
                    :current.sync="page3"
                    :page-size="pagesize3"
                    :page-size-opts="[10, 20, 30, 40, 100]"
                    show-elevator
                    show-sizer
                    show-total
                    @on-change="changePage(3, $event)"
                    @on-page-size-change="handlePageSize(3, $event)"
                  >
                  </Page>
                </div>
              </div>
            </div>
            <!-- 本地文件 -->
            <div v-show="tab == 3">
              <div class="local">
                <label style="margin-right: 10px">请上传本地文件:</label>
                <Upload
                  :action="action"
                  :headers="headers"
                  :show-upload-list="false"
                  :format="fileFormat"
                  :on-format-error="handleFormatError"
                  :on-success="handleSuccess"
                  :on-error="handleError"
                >
                  <span
                    style="color: #2d8cf0; cursor: pointer"
                    v-show="ok == true"
                  >
                    {{ file }}
                  </span>
                  <Button icon="ios-cloud-upload-outline" v-show="ok == false">
                    添加文件
                  </Button>
                </Upload>
              </div>
            </div>
          </div>
        </div>
        <!-- 右侧 -->
        <div class="box">
          <!-- 右侧按钮组 -->
          <div class="tabbox">
            <div
              class="tab"
              v-for="(item, index) in tabList"
              :key="index"
              :class="{ active: index == tab2 }"
              @click="active2(index)"
            >
              {{ item }}
            </div>
          </div>
          <div class="contentBox">
            <!-- 设备中 -->
            <div v-show="tab2 == 0" style="height: 100%">
              <div class="tree">
                <Tree
                  :data="treeList1"
                  ref="tree1"
                  @on-select-change="getSectionid2()"
                  style="width: 100%"
                >
                </Tree>
              </div>
              <div class="table1">
                <Table
                  highlight-row
                  :columns="columns1"
                  :data="data4"
                  @on-current-change="handleRowChange2"
                >
                </Table>
                <div style="margin: 10px; overflow: hidden; text-align: right">
                  <Page
                    :total="total4"
                    :current.sync="page4"
                    :page-size="pagesize4"
                    :page-size-opts="[10, 20, 30, 40, 100]"
                    show-elevator
                    show-sizer
                    show-total
                    @on-change="changePage(4, $event)"
                    @on-page-size-change="handlePageSize(4, $event)"
                  >
                  </Page>
                </div>
              </div>
            </div>
            <!-- 已审核 -->
            <div v-show="tab2 == 1" class="tab2">
              <div>
                <div class="filter" style="line-height: 40px">
                  <Input
                    v-model="programcode1"
                    placeholder="程序号/产品名称"
                    style="width: 200px"
                  />
                </div>
                <Button
                  type="primary"
                  icon="ios-search"
                  @click="getCheckedList(1, 10, 2)"
                >
                  查询
                </Button>
              </div>
              <div>
                <Table
                  highlight-row
                  :data="data5"
                  :columns="columns2"
                  @on-row-dblclick="handleRowChange2"
                >
                </Table>
                <div style="margin: 10px; overflow: hidden; text-align: right">
                  <Page
                    :total="total5"
                    :current.sync="page5"
                    :page-size="pagesize5"
                    :page-size-opts="[10, 20, 30, 40, 100]"
                    show-elevator
                    show-sizer
                    show-total
                    @on-change="changePage(5, $event)"
                    @on-page-size-change="handlePageSize(5, $event)"
                  >
                  </Page>
                </div>
              </div>
            </div>
            <!-- 修改记录 -->
            <div v-show="tab2 == 2" style="height: 100%">
              <div>
                <div class="inline">
                  <label>日期范围</label>:
                  <DatePicker
                    type="daterange"
                    format="yyyy-MM-dd"
                    :value="index_time1"
                    style="width: 180px"
                    @on-change="getDate1"
                  ></DatePicker>
                </div>
                <div class="inline" style="line-height: 40px">
                  <label>程序号</label>:
                  <Input v-model="code1" style="width: 160px" />
                </div>
                <Button
                  type="primary"
                  icon="ios-search"
                  @click="getHistory(1, 10, 2)"
                >
                  查询
                </Button>
              </div>
              <div class="tree2">
                <Tree
                  :data="treeList1"
                  ref="tree1"
                  @on-select-change="getSectionid2()"
                  style="width: 100%"
                >
                </Tree>
              </div>
              <div class="table2">
                <Table
                  highlight-row
                  :data="data6"
                  :columns="columns3"
                  @on-current-change="handleRowChange2"
                >
                </Table>
                <div style="margin: 10px; overflow: hidden; text-align: right">
                  <Page
                    :total="total6"
                    :current.sync="page6"
                    :page-size="pagesize6"
                    :page-size-opts="[10, 20, 30, 40, 100]"
                    show-elevator
                    show-sizer
                    show-total
                    @on-change="changePage(6, $event)"
                    @on-page-size-change="handlePageSize(6, $event)"
                  >
                  </Page>
                </div>
              </div>
            </div>
            <!-- 本地文件 -->
            <div v-show="tab2 == 3">
              <div class="local">
                <label style="margin-right: 10px">请上传本地文件:</label>
                <Upload
                  :action="action"
                  :headers="headers"
                  :show-upload-list="false"
                  :format="fileFormat"
                  :on-format-error="handleFormatError"
                  :on-success="handleSuccess1"
                  :on-error="handleError"
                >
                  <span
                    style="color: #2d8cf0; cursor: pointer"
                    v-show="ok1 == true"
                  >
                    {{ file1 }}
                  </span>
                  <Button icon="ios-cloud-upload-outline" v-show="ok1 == false">
                    添加文件
                  </Button>
                </Upload>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <!-- 中间按钮组 -->
        <div class="buttonbox">
          <Button type="primary" @click="download(1)">下载</Button>
          <Button type="primary" @click="diff()">对比</Button>
          <Button type="primary" @click="download(2)">下载</Button>
        </div>
        <!-- 对比之前 -->
        <div class="diff" style="display: flex" v-show="diffshow == false">
          <!-- 左侧代码块 -->
          <div class="box" style="border-right: none" v-html="infoHtml1"></div>
          <!-- 右侧代码块 -->
          <div class="box" v-html="infoHtml2"></div>
        </div>
        <!-- 对比之后 -->
        <div class="diffbox" v-show="diffshow == true">
          <code-diff
            :old-string="oldStr"
            :new-string="newStr"
            :context="1000"
            outputFormat="side-by-side"
            :isShowNoChange="true"
          />
        </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
            v-for="(v, i) in previewList"
            :label="
              v.program_type == 1
                ? `主程序（${v.program_code}）`
                : `子程序（${v.program_code}）`
            "
            :name="`${i}`"
            :key="i"
          >
            <textarea class="echo_textarea" :value="v.file_content"></textarea>
          </TabPane>
        </Tabs>
      </div>
    </Modal>
    <!-- 选择子程序弹框 -->
    <Modal
      class="newModalClass echo_wrap"
      v-model="selectModal"
      :width="666"
      footer-hide
    >
      <p slot="header">
        <span> 选择程序 </span>
      </p>
      <div class="modal_body">
        <div class="echo_wrap">
          <Table
            highlight-row
            :data="selectList"
            :columns="selectColumns"
            @on-row-click="handleSelect"
          >
          </Table>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
import moment from "moment";
import axios from "@/libs/api.request";
import CodeDiff from "vue-code-diff";

export default {
  components: { CodeDiff },
  data() {
    return {
      oldStr: "",
      newStr: "",
      // 文件上传地址
      action: axios.publicPath + "dnc/DncPgCreate/Upload",
      // 文件上传请求头
      headers: {
        token: localStorage.getItem("token"),
        timestamp: localStorage.getItem("timestamp"),
        nonce: localStorage.getItem("nonce"),
        sign: localStorage.getItem("sign"),
      },
      // tab 列表
      tabList: ["设备中", "已审核", "修改记录", "本地文件"],
      // 左侧 tab 索引
      tab: 0,
      // 右侧 tab 索引
      tab2: 0,
      // 左右各两棵树
      treeList: [],
      treeList1: [],
      // 六个表格 页码 页距 总计
      total: 0,
      total2: 0,
      total3: 0,
      total4: 0,
      total5: 0,
      total6: 0,
      page: 1,
      page2: 1,
      page3: 1,
      page4: 1,
      page5: 1,
      page6: 1,
      pagesize: 10,
      pagesize2: 10,
      pagesize3: 10,
      pagesize4: 10,
      pagesize5: 10,
      pagesize6: 10,
      // 六个表格 数据
      data1: [],
      data2: [],
      data3: [],
      data4: [],
      data5: [],
      data6: [],
      // 程序预览相关参数
      previewList: [],
      previewModal: false,
      // 六个表格 字段列 两两共用一个
      columns1: [
        {
          title: "程序号",
          key: "program_code",
          align: "center",
        },
        {
          title: "产品名称",
          key: "product_name",
          align: "center",
        },
      ],
      columns2: [
        {
          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);
                    let row = params.row;
                    if (!row.program_version) {
                      _this.$Message.error("程序版本号不能为空！");
                      return false;
                    }
                    _this.axios
                      .request({
                        url: "/dnc/DncPgCreate/GetAllContent",
                        params: {
                          programId: row.id,
                        },
                        method: "get",
                      })
                      .then((res) => {
                        let result = res.data;
                        if (result.ret == 1) {
                          _this.previewList = [];
                          let data = result.data;
                          if (data && Array.isArray(data) && data.length) {
                            _this.previewList = data;
                          }
                          _this.previewModal = true;
                        } else {
                          _this.$Message.error(_this.$t(result.msg));
                        }
                      });
                  },
                },
              },
              "预览"
            );
          },
        },
        {
          title: "程序号",
          key: "program_code",
        },
        {
          title: "产品名称",
          key: "productname",
        },
        {
          title: "创建人",
          key: "createname",
        },
        {
          title: "创建备注",
          key: "create_remark",
        },
        {
          title: "审核人",
          key: "checkname",
        },
        {
          title: "审核备注",
          key: "check_remark",
        },
      ],
      columns3: [
        {
          title: "程序号",
          key: "program_number",
          align: "center",
        },
        {
          title: "产品名称",
          key: "product_name",
          align: "center",
        },
        {
          title: "变更时间",
          key: "time",
          align: "center",
        },
      ],
      // 左右各两个日期范围搜索条件
      index_time: [],
      index_time1: [],
      // 左右各两个程序号/产品名称搜索条件
      programcode: "",
      programcode1: "",
      // 左右各两个程序号搜索条件
      code: "",
      code1: "",
      // 左右各两个上传文件
      file: "",
      file1: "",
      // 左右各两个文件上传是否成功标志位
      ok: false,
      ok1: false,
      // 左右各两个代码块
      infoHtml1: "",
      infoHtml2: "",
      // 是否经过对比标志位
      diffshow: false,
      // 左右各两个产线层级ID
      sectionid: "",
      sectionid1: "",
      // 左右两个表格当前行数据
      obj: {},
      obj2: {},
      // 程序内容中间过渡变量
      content: "",
      // 左右各两个程序内容以行切割的数组
      content1: [],
      content2: [],

      selectArea: 0,
      selectList: [],
      selectModal: false,
      selectColumns: [
        {
          type: "index",
          title: "序号",
          align: "center",
          width: 60,
        },
        {
          title: "类型",
          align: "center",
          render: (h, params) => {
            let type = params.row.program_type;
            let text;
            if (type == 1) {
              text = "主程序";
            } else if (type == 2) {
              text = "子程序";
            } else {
              text = "NA";
            }
            return h("div", {
              domProps: {
                innerHTML: text,
              },
            });
          },
        },
        {
          title: "程序号",
          key: "program_code",
          align: "center",
        },
        {
          title: "文件名称",
          key: "file_name",
          align: "center",
        },
      ],

      left: false,
      right: false,

      contentLeft: "",
      contentRight: "",
    };
  },
  computed: {
    tree() {
      return this.$store.state.app.tree;
    },
    // 文件上传允许的格式
    fileFormat() {
      return ["txt", "eia", "mpf", "min", "spf", "cnc", "nc", "prg"];
    },
  },
  mounted() {
    // 获取树形图数据
    this.$store.dispatch("getTree");
    // 左右两个日期范围搜索条件初始化 一周以内
    this.index_time = [
      moment().subtract(7, "days").format("YYYY-MM-DD"),
      moment().format("YYYY-MM-DD"),
    ];
    this.index_time1 = [
      moment().subtract(7, "days").format("YYYY-MM-DD"),
      moment().format("YYYY-MM-DD"),
    ];
    // 获取已审核中表格数据
    this.getCheckedList(1, 10);
    // 异步渲染树结构
    setTimeout(() => {
      this.treeList = JSON.parse(JSON.stringify(this.tree));
      this.treeList1 = JSON.parse(JSON.stringify(this.tree));
    }, 1000);
  },
  methods: {
    // tab 切换
    active(i) {
      this.tab = i;
      this.left = true;
      this.programcode = "";
      this.diffshow = false;
      this.infoHtml1 = "";
      this.content1 = [];
    },
    active2(i) {
      this.tab2 = i;
      this.right = true;
      this.programcode1 = "";
      this.diffshow = false;
      this.infoHtml2 = "";
      this.content2 = [];
    },
    // 监听左右各两棵树获取树节点
    getSectionid() {
      let node = this.$refs.tree.getSelectedNodes();
      console.log(node);
      this.left = true;

      if (node.length > 0) {
        if (node[0].children.length > 0) {
          this.$Message.error(this.$t(100128));
          return false;
        }
        this.sectionid = node[0].value;
        if (this.tab == 0) {
          this.getList(1, 10, 1);
        } else if (this.tab == 2) {
          this.getHistory(1, 10, 1);
        }
      }
    },
    getSectionid2() {
      let node = this.$refs.tree1.getSelectedNodes();
      console.log(node);
      this.right = true;

      if (node.length > 0) {
        if (node[0].children.length > 0) {
          this.$Message.error(this.$t(100128));
          return false;
        }
        this.sectionid1 = node[0].value;
        if (this.tab2 == 0) {
          this.getList(1, 10, 2);
        } else if (this.tab2 == 2) {
          this.getHistory(1, 10, 2);
        }
      }
    },
    // 获取设备中数据
    getList(page, pagesize, i) {
      let id = 0;
      if (i == 1) {
        if (!this.sectionid) {
          this.$Message.error(this.$t(700071));
          return false;
        }
        id = this.sectionid;
      }
      if (i == 2) {
        if (!this.sectionid1) {
          this.$Message.error(this.$t(700071));
          return false;
        }
        id = this.sectionid1;
      }
      let params = {
        sectionid: id,
        page: page,
        pageSize: pagesize,
      };
      this.axios
        .request({
          url: "/dnc/DncContrast/getProgramBymID",
          params,
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            this.renderTable1(result, i);
          } else {
            this.$Message.error(this.$t(result.msg));
          }
        });
    },
    // 渲染设备中表格数据
    renderTable1(res, i) {
      let arr = [];
      res.data.forEach((item) => {
        if (item) {
          arr.push({
            id: item.id,
            program_code: item.program_code,
            product_name: item.product_name,
            machine_id: item.machine_id,
          });
        }
      });
      if (i == 1) {
        this.total = res.total;
        this.data1 = arr;
      }
      if (i == 2) {
        this.total4 = res.total;
        this.data4 = arr;
      }
    },
    // 监听左右两个日期范围的变化
    getDate(value) {
      console.log(value);
      this.index_time = value;
    },
    getDate1(value) {
      console.log(value);
      this.index_time1 = value;
    },
    // 获取修改记录中表格数据
    getHistory(page, pagesize, i) {
      let starttime = "";
      let endtime = "";
      let code_str = "";
      if (i == 1) {
        starttime = this.index_time[0];
        endtime = this.index_time[1];
        code_str = this.code;
        if (!this.sectionid) {
          this.$Message.error(this.$t(700071));
          return false;
        }
      }
      if (i == 2) {
        starttime = this.index_time1[0];
        endtime = this.index_time1[1];
        code_str = this.code1;
        if (!this.sectionid1) {
          this.$Message.error(this.$t(700071));
          return false;
        }
      }

      let params = {
        sectionid: i == 1 ? this.sectionid : this.sectionid1,
        programcode: code_str,
        starttime: starttime,
        endtime: endtime,
        page: page,
        pageSize: pagesize,
      };
      // 这里会产生一个 Bug 左右两边的表格数据会因其中一个刷新另一个清空
      this.data3 = [];
      this.data6 = [];
      this.total3 = 0;
      this.total6 = 0;
      this.axios
        .request({
          url: "/dnc/DncContrast/getProgramHistory",
          params,
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          let data = result.data;
          if (result.ret == 1 && data && Array.isArray(data) && data.length) {
            this.renderTable3(result, i);
          } else {
            this.$Message.error(this.$t(1000));
          }
        });
    },
    // 渲染修改记录中表格数据
    renderTable3(res, i) {
      let arr = [];
      res.data.forEach((item) => {
        if (item) {
          arr.push({
            id: item.id,
            program_number: item.program_number,
            product_name: item.productname,
            time: item.time,
            document: item.document,
          });
        }
      });
      if (i == 1) {
        this.total3 = res.total;
        this.data3 = arr;
      }
      if (i == 2) {
        this.total6 = res.total;
        this.data6 = arr;
      }
    },
    // 获取已审核中表格数据
    getCheckedList(page, pagesize, i = 0) {
      let { request } = this;
      let keyword;
      if (i == 1) {
        keyword = this.programcode;
      }
      if (i == 2) {
        keyword = this.programcode1;
      }
      let data = {
        keywords: keyword,
        page: page,
        pageSize: pagesize,
      };
      request("/dnc/DncPgCreate/GetProgramsCheckedLists", data, "get").then(
        (res) => {
          if (res.data.ret == 1) {
            let arr = res.data.data;

            if (i == 0) {
              this.total2 = res.data.total;
              this.total5 = res.data.total;

              this.data2 = arr;
              this.data5 = arr;
            }
            if (i == 1) {
              this.total2 = res.data.total;
              this.data2 = arr;
            }
            if (i == 2) {
              this.total5 = res.data.total;
              this.data5 = arr;
            }
          }
        }
      );
    },
    // 左右两个监听表格当前行变化
    handleRowChange(currentRow) {
      const _this = this;

      this.obj = currentRow;
      if (this.tab == 0) {
        let id = this.obj.machine_id,
          code = this.obj.program_code;
        this.getContent(id, code, 1);
      }
      if (this.tab == 1) {
        _this.selectArea = 1;
        _this.axios
          .request({
            url: "/dnc/DncPgCreate/GetAllContent",
            params: {
              programId: currentRow.id,
            },
            method: "get",
          })
          .then((res) => {
            let result = res.data;
            if (result.ret == 1) {
              _this.selectList = [];
              let data = result.data;
              if (data && Array.isArray(data) && data.length) {
                _this.selectList = data;
              }
              _this.selectModal = true;
            } else {
              _this.$Message.error(_this.$t(result.msg));
            }
          });
      }
      if (this.tab == 2) {
        this.content = this.obj.document;
        this.renderContent(1);
      }
      this.diffshow = false;
    },
    handleRowChange2(currentRow) {
      const _this = this;

      this.obj2 = currentRow;
      if (this.tab2 == 0) {
        let id = this.obj2.machine_id,
          code = this.obj2.program_code;
        this.getContent(id, code, 2);
      }
      if (this.tab2 == 1) {
        _this.selectArea = 2;
        _this.axios
          .request({
            url: "/dnc/DncPgCreate/GetAllContent",
            params: {
              programId: currentRow.id,
            },
            method: "get",
          })
          .then((res) => {
            let result = res.data;
            if (result.ret == 1) {
              _this.selectList = [];
              let data = result.data;
              if (data && Array.isArray(data) && data.length) {
                _this.selectList = data;
              }
              _this.selectModal = true;
            } else {
              _this.$Message.error(_this.$t(result.msg));
            }
          });
      }
      if (this.tab2 == 2) {
        this.content = this.obj2.document;
        this.renderContent(2);
      }
      this.diffshow = false;
    },
    // 获取设备中程序内容
    getContent(id, code, i) {
      let { request } = this;
      let data = {
        machine_id: id,
        programcode: code,
      };
      request("/dnc/DncUpDown/getProgramContent", data, "get").then((res) => {
        if (res.data.ret == 1) {
          this.content = res.data.data;
          if (i == 1) {
            this.renderContent(1);
          }
          if (i == 2) {
            this.renderContent(2);
          }
        }
      });
    },

    getContent2(url, i) {
      let { request } = this;
      let data = {
        file_url: url,
      };
      request("/dnc/DncPgCreate/getContent", data, "get").then((res) => {
        if (res.data.ret == 1) {
          this.content = res.data.data.content;
          if (i == 1) {
            this.renderContent(1);
            this.obj.content = this.content;
          }
          if (i == 2) {
            this.renderContent(2);
            this.obj2.content = this.content;
          }
        }
      });
    },
    // 获取已审核中程序内容
    handleSelect(row) {
      let { selectArea } = this;
      this.content = row.file_content;
      if (selectArea == 1) {
        this.renderContent(1);
      }
      if (selectArea == 2) {
        this.renderContent(2);
      }
      this.selectModal = false;
    },
    // 渲染程序内容
    renderContent(i) {
      var infoArray = this.content.split("\n");
      var infohtml = "";
      if (infoArray && infoArray.length) {
        infoArray.forEach((ele, i) => {
          infohtml +=
            '<p><span style="background:#ddd;display:inline-block;text-align:center;padding:0px 5px;min-width:30px;">' +
            (i + 1) +
            "</span><span>" +
            ele +
            "</span></p>";
        });
      }
      if (i == 1) {
        this.content1 = infoArray;
        this.infoHtml1 = infohtml;
        this.contentLeft = this.content;
      }
      if (i == 2) {
        this.content2 = infoArray;
        this.infoHtml2 = infohtml;
        this.contentRight = this.content;
      }
    },
    // 监听文件上传格式错误钩子
    handleFormatError(file) {
      this.$Message.error(this.$t(888828));
    },
    // 监听文件上传失败钩子
    handleError() {
      this.$Message.error(this.$t(888824));
    },
    // 左右各两个监听文件上传成功钩子
    handleSuccess(res, file) {
      if (res.ret == 1) {
        this.file = res.data.name;
        this.getContent2(res.data.file_url, 1);
        this.$Message.success("上传成功");
        this.diffshow = false;
        this.ok = true;
      } else {
        if (res.msg.toString().indexOf(",") != -1) {
          inittip(res.msg);
        } else {
          this.$Message.error(this.$t(res.msg));
        }
      }
    },
    handleSuccess1(res, file) {
      if (res.ret == 1) {
        this.file1 = res.data.name;
        this.getContent2(res.data.file_url, 2);
        this.$Message.success("上传成功");
        this.diffshow = false;
        this.ok1 = true;
      } else {
        if (res.msg.toString().indexOf(",") != -1) {
          inittip(res.msg);
        } else {
          this.$Message.error(this.$t(res.msg));
        }
      }
    },
    // 封装请求方法
    request(url, data, type) {
      if (type == "get") {
        return this.axios
          .request({
            url: url,
            params: data,
            method: type,
          })
          .then((res) => {
            return res;
          })
          .catch((error) => error);
      } else {
        return this.axios
          .request({
            url: url,
            data,
            method: type,
          })
          .then((res) => {
            return res;
          })
          .catch((error) => error);
      }
    },
    // 六个表格的监听页码页距变化方法
    changePage(table, e) {
      switch (table) {
        case 1:
          this.page = e;
          this.data1 = this.getList(this.page, this.pagesize, 1);
          break;
        case 2:
          this.page2 = e;
          this.data2 = this.getCheckedList(this.page2, this.pagesize2, 1);
          break;
        case 3:
          // TODO
          break;
        case 4:
          this.page4 = e;
          this.data4 = this.getList(this.page4, this.pagesize4, 2);
          break;
        case 5:
          this.page5 = e;
          this.data5 = this.getCheckedList(this.page5, this.pagesize5, 2);
          break;
        case 6:
          // TODO
          break;
      }
    },
    handlePageSize(num, e) {
      switch (num) {
        case 1:
          this.pagesize = e;
          this.data1 = this.getList(this.page, this.pagesize, 1);
          break;
        case 2:
          this.pagesize2 = e;
          this.data2 = this.getCheckedList(this.page2, this.pagesize2, 1);
          break;
        case 3:
          // TODO
          break;
        case 4:
          this.pagesize4 = e;
          this.data4 = this.getList(this.page4, this.pagesize4, 2);
          break;
        case 5:
          this.pagesize5 = e;
          this.data5 = this.getCheckedList(this.page5, this.pagesize5, 2);
          break;
        case 6:
          // TODO
          break;
      }
    },
    // 左右各两个下载方法
    download(a) {
      let filename = "";
      let content = "";

      if (a == 1) {
        if (!this.content1.length) {
          this.$Message.error("请先选择程序");
          return false;
        }
        filename = this.obj.program_code + ".txt";
        content = this.content1.join("\n");
        if (!this.obj.program_code) {
          filename = this.file;
        }
      }
      if (a == 2) {
        if (!this.content2.length) {
          this.$Message.error("请先选择程序");
          return false;
        }
        filename = this.obj2.program_code + ".txt";
        content = this.content2.join("\n");
        if (!this.obj2.program_code) {
          filename = this.file1;
        }
      }

      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);
    },
    // 对比方法
    diff() {
      if (!this.content1.length || !this.content2.length) {
        this.$Message.error(this.$t(700149));
        return false;
      }
      let left = this.content1;
      let right = this.content2;

      left = left.join("\n").replace(/\r/g, "\n");
      right = right.join("\n").replace(/\r/g, "\n");
      left = left.replace(/\n+/g, "\n");
      right = right.replace(/\n+/g, "\n");

      this.oldStr = left;
      this.newStr = right;

      this.diffshow = true;
    },
  },
};
</script>

<style scoped>
.echo_textarea::-webkit-scrollbar {
  width: auto;
}
.echo_textarea {
  font-size: 14px;
  white-space: nowrap;
  overflow: scroll;
  resize: none;
  width: 100%;
  height: 444px;
}
.flex {
  display: flex;
  width: 100%;
}
.box {
  width: 50%;
  height: 560px;
  border: 1px solid #000;
}
.diff .box {
  width: 50%;
  height: 60vh;
  border: 1px solid #000;
  overflow: auto;
}
.diffbox {
  width: 100%;
  height: 60vh;
  border: 1px solid #000;
  overflow: auto;
}
.number {
  background: #ddd;
  display: inline-block;
  text-align: center;
  padding: 0px 5px;
  min-width: 30px;
}
.tabbox {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #000;
}
.tab {
  color: #fff;
  background-color: #2d8cf0;
  width: 20%;
  font-size: 20px;
  line-height: 40px;
  height: 40px;
  text-align: center;
  cursor: pointer;
}
.active {
  background-color: #f0ad4e;
}
.contentBox {
  height: 500px;
}
.tree {
  width: 40%;
  height: 480px;
  border: 1px solid #ddd;
  overflow-y: scroll;
  margin: 5px;
  float: left;
}
.table1 {
  width: 56%;
  float: left;
  margin: 5px;
  height: 480px;
  overflow: auto;
}
.table2 {
  width: 56%;
  float: left;
  margin: 5px;
  height: 435px;
  overflow: auto;
}
.tab2 {
  padding: 10px;
  height: 495px;
  overflow: auto;
}
.inline {
  display: inline-block;
  height: 40px;
  line-height: 40px;
  margin: 5px;
}
.tree2 {
  width: 40%;
  height: 440px;
  border: 1px solid #ddd;
  overflow-y: scroll;
  margin: 5px;
  float: left;
}
.local {
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
}
.buttonbox {
  width: 100%;
  height: 53px;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border: 1px solid #000;
  border-bottom: none;
  margin-top: 20px;
}
</style>
