<template>
  <div class="content-main">
    <el-form
      label-width="110px"
      ref="form"
      :inline="true"
      class="search-bm-boder"
      :model="form"
    >
      <el-row>
        <el-form-item label="委托单位：" prop="ccqymc">
          <el-input
            v-model="form.ccqymc"
            class="w170"
            placeholder="请输入委托单位"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="合同号：" prop="hth">
          <el-input
            v-model="form.hth"
            class="w170"
            placeholder="请输入合同号"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="委托单位回复：" prop="ccqyhf">
          <el-select
            v-model="form.ccqyhf"
            class="w170"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in option"
              :label="item.label"
              :value="item.value"
              :key="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <div class="search-button">
            <span class="search-line"></span>
            <div
              class="search-select"
              @click="searchShowMoreBool = !searchShowMoreBool"
            >
              更多条件
              <i class="el-icon-arrow-up" v-show="searchShowMoreBool"></i>
              <i class="el-icon-arrow-down" v-show="!searchShowMoreBool"></i>
            </div>
            <el-button
              type="primary"
              @click="submitForm()"
              size="small"
              class="iconfont iconchaxun"
              >查询</el-button
            >
            <el-button
              type="primary"
              @click="resetForm('form')"
              size="small"
              class="iconfont iconzhongzhi"
              >重置</el-button
            >
          </div>
        </el-form-item>
      </el-row>
      <el-row v-show="searchShowMoreBool">
        <el-form-item
          label="履约截止日期："
          clearable
          prop="jhwcsj"
          label-width="120px"
        >
          <el-date-picker
            style="width: 240px"
            v-model="form.jhwcsj"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            clearable
          ></el-date-picker>
        </el-form-item>
      </el-row>
    </el-form>
    <el-table
      :data="tableData"
      border
      align="center"
      style="width: 100%"
      v-loading="loading"
    >
      <el-table-column label="序号" align="center" width="50px">
        <template slot-scope="{ $index }">{{ $index + 1 }}</template>
      </el-table-column>
      <el-table-column
        prop="ccqymc"
        align="center"
        label="委托单位"
        width="220px"
      ></el-table-column>
      <el-table-column
        prop="hth"
        align="center"
        label="合同号"
      ></el-table-column>
      <el-table-column
        prop="jhwcrq"
        align="center"
        label="履约截止日期"
      ></el-table-column>
      <el-table-column
        prop="txrq"
        align="center"
        label="提醒日期"
      ></el-table-column>
      <el-table-column
        prop="hfsj"
        align="center"
        label="回复时间"
      ></el-table-column>
      <el-table-column
        prop="ccqyhf"
        align="center"
        label="委托单位回复"
      ></el-table-column>
      <el-table-column prop="sm" align="center" label="说明"></el-table-column>
      <el-table-column label="回复状态" align="center">
        <template slot-scope="{ row }">
          <span v-if="row.hfzt == '1'">已回复</span>
          <span v-if="row.hfzt == '0'">未回复</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="敦促履约函">
        <template slot-scope="{ row }">
          <el-tooltip
            class="item"
            effect="light"
            content="生成"
            placement="top"
            v-if="
              row.hfzt == '1' &&
              row.ccqyhf == '不能按时完成' &&
              row.sclyhzt < '2'
            "
          >
            <el-button
              type="primary"
              size="small"
              class="iconfont iconshengchenghuizong operate_show_btn"
              @click="generatePrint(row)"
            ></el-button>
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="light"
            content="打印"
            placement="top"
            v-if="row.sclyhzt == '2'"
            v-show="show(row)"
          >
            <el-button
              type="primary"
              size="small"
              class="iconfont icondaochu11 operate_show_btn"
              @click="generatePrint(row)"
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :total="total"
    >
    </el-pagination>
    <div style="height: 50px"></div>
    <el-dialog
      :modal="false"
      :show-close="true"
      :visible.sync="dialogVisible"
      width="1000px"
    >
      <template slot="title">
        <span style="color: #fff">敦促履约函</span>
      </template>
      <div class="line-box">
        <el-row :gutter="10">
          <el-col :span="11">
            <label class="label-title"> 编制人：</label>
            <label>
              <el-input
                v-model="letter.bzr"
                readonly
                placeholder="登录人"
              ></el-input>
            </label>
          </el-col>
          <el-col :span="12">
            <label class="label-title">编制日期：</label>
            <label style="display: inline-block">
              <el-date-picker
                class="dateInputCompatible"
                :readonly="readonly"
                v-model="letter.bzrq"
                type="date"
                value-format="yyyy年MM月dd日"
              ></el-date-picker>
            </label>
          </el-col>
        </el-row>
      </div>
      <div class="content-dcllh">
        <kind-editor
          id="detailText"
          height="420px"
          width="100%"
          v-if="letter.sclyhzt < '2'"
          :content="dcllh"
          pluginsPath="/static/kindeditor/plugins/"
          :readonly="readonly"
          :loadStyleMode="false"
          @on-content-change="onContentChange"
        ></kind-editor>
        <div class="data-box" v-else>
          <div
            v-html="dcllh"
            id="txtData"
            :class="{ 'txt-data': isPrint }"
          ></div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          size="small"
          type="primary"
          @click="preserve"
          v-if="letter.sclyhzt == 0 || letter.sclyhzt == 1"
          class="iconfont iconbaocun"
          >保存</el-button
        >
        <el-button
          size="small"
          type="primary"
          @click="dialogVisible2 = true"
          v-if="letter.sclyhzt == 0 || letter.sclyhzt == 1"
          class="iconfont iconshengchenghuizong"
          >生成</el-button
        >
        <el-button
          size="small"
          type="primary"
          @click="directStamp"
          class="iconfont icondaochu11"
          v-if="letter.sclyhzt == 2"
          >打印</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="生成"
      :visible.sync="dialogVisible2"
      width="1000px"
      :close-on-click-modal="false"
    >
      <div class="txt-content" v-html="dcllh"></div>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          class="iconfont iconbaocun"
          size="small"
          @click="generate"
          >确认</el-button
        >
        <el-button
          type="primary"
          class="iconfont iconfanhui"
          size="small"
          @click="dialogVisible2 = false"
          >取消</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  scdclyh,
  queryPageList,
  xgbcDclyh,
} from "@/api/ReceivingDeposit/index";
import KindEditor from "@/components/common/kindeditor";
export default {
  components: {
    KindEditor,
  },
  data() {
    return {
      tableData: [],
      total: 0,
      pageNum: 1,
      loading: true,
      id: "1",
      letter: {
        bzr: "",
        bzrq: "",
      },
      dcllh: "",
      option: [
        { label: "按时完成", value: "按时完成" },
        { label: "不能按时完成", value: "不能按时完成" },
      ],
      dialogVisible: false,
      dialogVisible2: false,
      searchShowMoreBool: false,
      pageSize: 10,
      form: {
        ccqymc: "",
        hth: "",
        ccqyhf: "",
        jhwcsj: [],
      },
      isPrint: false,
      nowDate: this.getNowDate(),
    };
  },
  created() {
    this.getTable(
      { pageNum: this.pageNum, pageSize: this.pageSize },
      this.form
    );
  },
  computed: {
    // 0未生成，1已保存，2已生成
    readonly() {
      return this.letter.sclyhzt == 2;
    },
  },
  methods: {
    getTable(params, data) {
      this.loading = true;
      let formData = {};
      if (data.jhwcsj) {
        formData = {
          ccqymc: data.ccqymc,
          hth: data.hth,
          ccqyhf: data.ccqyhf,
          jhwcsjjs: data.jhwcsj[1],
          jhwcsjks: data.jhwcsj[0],
        };
      } else {
        formData = {
          ccqymc: data.ccqymc,
          hth: data.hth,
          ccqyhf: data.ccqyhf,
          jhwcsjjs: "",
          jhwcsjks: "",
        };
      }
      queryPageList(params, formData).then((res) => {
        if (res.infoCode == 200 && res.success) {
          this.total = res.data.total;
          this.tableData = res.data.items || [];
          this.loading = false;
          if (this.tableData.length == 0 && this.pageNum > 1) {
            this.pageNum = 1;
            this.submitForm();
          }
        }
      });
    },
    resetForm(formName) {
      this.pageNum = 1;
      this.$refs[formName].resetFields();
      this.getTable(
        {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        },
        this.form
      );
    },
    // writeBack(row) {
    //   this.$router.push({
    //     name: "contractRemindWriteBack",
    //     query: {
    //       ...row,
    //     },
    //   });
    // },
    // 提交搜索
    submitForm() {
      this.getTable(
        {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        },
        this.form
      );
    },
    // 窗口
    generatePrint(row) {
      this.dialogVisible = true;
      this.id = row.id;
      // 保存前打开  保存后打开
      if (row.sclyhzt == "0") {
        scdclyh({ hth: row.hth }).then((res) => {
          this.letter = { ...res.data, ...row };
          this.dcllh = `<p style=\"text-align:center;\">\n\t<span style=\"color:#333333;font-family:&quot;Arial Normal&quot;, Arial, sans-serif;font-size:24px;\">关于敦促${
            this.letter.cjdw ? this.letter.cjdw : "xx公司"
          }加快出入库进度如期履行合同的函</span>\n</p>\n<p style=\"text-align:left;\">\n\t<span style=\"color:#333333;font-family:&quot;Arial Normal&quot;, Arial, sans-serif;font-size:24px;\"><span style=\"color:#333333;font-family:&quot;Arial Normal&quot;, Arial, sans-serif;font-size:13px;text-wrap:wrap;\"><br />\n</span></span>\n</p>\n<p style=\"text-align:left;\">\n\t<span style=\"color:#333333;font-family:&quot;Arial Normal&quot;, Arial, sans-serif;font-size:24px;\"><span style=\"display:none;\"></span><span style=\"color:#333333;font-family:&quot;Arial Normal&quot;, Arial, sans-serif;font-size:18px;text-wrap:wrap;\">${
            this.letter.cjdw ? this.letter.cjdw : "xx公司"
          }：</span></span>\n</p>\n<p style=\"text-align:left;\">\n\t<span style=\"color:#333333;font-family:&quot;Arial Normal&quot;, Arial, sans-serif;font-size:24px;\"><span style=\"font-size:18px;\"></span><span style=\"color:#333333;font-family:&quot;Arial Normal&quot;, Arial, sans-serif;font-size:13px;text-wrap:wrap;\"><span style=\"font-size:18px;\">&nbsp;&nbsp;&nbsp;&nbsp;</span><span style=\"font-size:18px;\">&nbsp;&nbsp;&nbsp;&nbsp;</span><span style=\"font-size:18px;\">贵公司于${
            this.letter.cjsj ? this.letter.cjsj : "xxxx年xx月xx日"
          }签订的合同，编号为：${
            this.letter.hth ? this.letter.hth : "xxxx"
          } 。根据该场《交易细则》、交易公告以及合同的要求，若贵司在规定履约期限内未能完成交提货任务，我市场将按照《交易细则》相关条款予以处理。望贵司予以重视，积极协商，妥善处理。</span></span></span>\n</p>\n<p style=\"text-align:left;\">\n\t<span style=\"color:#333333;font-family:&quot;Arial Normal&quot;, Arial, sans-serif;font-size:24px;\"><span style=\"font-size:18px;\"></span><span style=\"color:#333333;font-family:&quot;Arial Normal&quot;, Arial, sans-serif;font-size:13px;text-wrap:wrap;\"><span style=\"font-size:18px;\">&nbsp;&nbsp;&nbsp;&nbsp;</span><span style=\"font-size:18px;\">&nbsp;&nbsp;&nbsp;&nbsp;</span><span style=\"font-size:18px;\">特此通知！</span></span></span>\n</p>\n<p style=\"text-align:right;\">\n\t<span style=\"color:#333333;font-family:&quot;Arial Normal&quot;, Arial, sans-serif;font-size:24px;\"><br />\n</span>\n</p>\n<p style=\"text-align:right;\">\n\t<span style=\"color:#333333;font-family:&quot;Arial Normal&quot;, Arial, sans-serif;font-size:18px;\"><span style=\"color:#333333;font-family:&quot;Arial Normal&quot;, Arial, sans-serif;font-size:18px;text-wrap:wrap;\">中国天津粮油批发交易市场交易部（签章）</span></span>\n</p>\n<p style=\"text-align:right;\">\n\t<span style=\"color:#333333;font-family:&quot;Arial Normal&quot;, Arial, sans-serif;font-size:24px;\"><span style=\"color:#333333;font-family:&quot;Arial Normal&quot;, Arial, sans-serif;font-size:18px;text-wrap:wrap;\">日期：${
            this.letter.scsj ? this.letter.scsj : this.nowDate
          }</span><br />\n</span>\n</p>`;
        });
      } else {
        this.letter = { ...this.letter,...row };
        this.dcllh = row.dcllh;
        this.letter.bzr = this.letter.dclyhbzr;
        this.$set(this.letter, 'bzrq', this.letter.dclyhbzrq.substr(0,4)+'年'+this.letter.dclyhbzrq.substr(5,2)+'月'+this.letter.dclyhbzrq.substr(8,2)+'日')
        // this.letter.bzrq = this.letter.dclyhbzrq.substr(0,4)+'年'+this.letter.dclyhbzrq.substr(5,2)+'月'+this.letter.dclyhbzrq.substr(8,2)+'日';
      }
    },
    // 打印
    directStamp() {
      this.isPrint = true;
      setTimeout(() => {
        this.$print(document.getElementById("txtData"));
        this.dialogVisible = false;
        this.isPrint = false;
      });
    },
    // 履约函
    onContentChange(val) {
      this.dcllh = val;
    },
    // 生成
    generate() {
      xgbcDclyh({
        dclyhbzr: this.letter.bzr,
        dclyhbzrq: this.letter.bzrq,
        sclyhzt: "2",
        id: this.id,
        dclyh: this.dcllh,
      }).then((res) => {
        if (res.infoCode == 200) {
          this.dialogVisible = false;
          this.dialogVisible2 = false;
          this.$message({
            message: '操作成功',
            type: "success",
          });
          this.getTable(
            { pageNum: this.pageNum, pageSize: this.pageSize },
            this.form
          );
        }
      });
    },
    // 保存
    preserve() {
      xgbcDclyh({
        dclyhbzr: this.letter.bzr,
        dclyhbzrq: this.letter.bzrq,
        sclyhzt: "1",
        id: this.id,
        dclyh: this.dcllh,
      }).then((res) => {
        if (res.infoCode == 200) {
          this.dialogVisible = false;
          this.$message({
            message: '保存成功',
            type: "success",
          });
          this.getTable(
            { pageNum: this.pageNum, pageSize: this.pageSize },
            this.form
          );
        }
      });
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getTable(
        {
          pageNum: this.pageNum,
          pageSize: val,
        },
        this.form
      );
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getTable(
        {
          pageNum: val,
          pageSize: this.pageSize,
        },
        this.form
      );
    },
    show(row) {
      return row.ccqyhf == "不能按时完成" && row.hfzt == "1";
    },
    getNowDate() {
      let nowdays = new Date();
      let year = nowdays.getFullYear();
      let month = nowdays.getMonth() + 1;
      let date = nowdays.getDate();
      return year + "年" + month + "月" + date + "日"; //今天
    },
  },
};
</script>

<style lang="scss" scoped>
.line {
  // width: 1px;
  min-height: 40px;
  line-height: 40px;
  height: 100%;
  display: inline-block;
  border: none;
  padding: 0 0 0 10px;
  border-left: 1px dashed blue;
}

.line-box {
  border-bottom: 1px solid #000;
  padding-bottom: 10px;
}

.w170 {
  width: 170px !important;
}

label {
  display: inline-block;
}
.data-box {
  width: 100%;
  margin: auto;
  height: 420px;
}
#txtData {
  width: 100%;
}
.txt-data {
  width: 88% !important;
}
/deep/ .txt-content {
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
}
</style>
