<template>
  <div class="publish-main">
    <el-form :model="detailForm" ref="detailForm">
      <h2 style="text-align: center; font-weight: 600">交易明细</h2>
      <el-form-item
        label="公告标题"
        :rules="[
          { required: true, message: '请输入公告标题', trigger: 'blur' },
        ]"
        prop="title"
      >
        <el-input v-model="detailForm.title" :disabled="isView"></el-input>
      </el-form-item>
      <el-form-item
        label="发布人"
        :rules="[{ required: true, message: '请输入发布人', trigger: 'blur' }]"
        prop="fbr"
      >
        <el-input v-model="detailForm.fbr" :disabled="isView"></el-input>
      </el-form-item>
      <el-form-item
        label="公告内容"
        :rules="[
          { required: true, message: '请输入公告内容', trigger: 'blur' },
        ]"
        prop="fwb"
      >
        <el-input
          v-if="isView"
          v-html="detailForm.fwb"
          :disabled="isView"
          type="textarea"
          :autosize="{ minRows: 4 }"
        ></el-input>
        <kind-editor
          v-if="!isView"
          id="editor_id"
          height="300px"
          width="100%"
          :content="detailForm.fwb"
          pluginsPath="/static/kindeditor/plugins/"
          :loadStyleMode="false"
          @on-content-change="onContentChange"
        ></kind-editor>
        <!-- <el-table :data="tableData" stripe border>
                <el-table-column type="index" align="center" label="序号" width="60"></el-table-column>
                <el-table-column prop="dwmc" align="center" label="承储单位" min-width="180" show-overflow-tooltip></el-table-column>
                <el-table-column prop="ccdd" align="center" label="储存地点"> </el-table-column>
                <el-table-column prop="pzmc" align="center" label="品种" min-width="120" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="lssl" align="center" label="数量"></el-table-column>
                <el-table-column prop="scnd" align="center" label="生产年度"></el-table-column>
                <el-table-column prop="rz" align="center" label="容重g/L"></el-table-column>
                <el-table-column prop="sf" align="center" label="水分%"></el-table-column>
                <el-table-column prop="zhaz" align="center" label="杂质%"></el-table-column>
                <el-table-column prop="bwsl" align="center" label="不完善粒%"></el-table-column>
                <el-table-column prop="szqw" align="center" label="色泽气味"></el-table-column>
                <el-table-column prop="thqx" align="center" label="提货期限" width="120"></el-table-column>
        </el-table>-->
      </el-form-item>
    </el-form>
    <el-row style="text-align: center">
      <el-button
        v-if="!isView"
        @click="handleSave"
        class="iconfont iconbaocun"
        type="primary"
        size="small"
        >保存</el-button
      >
      <el-button
        v-if="!isView"
        @click="handlePublish"
        class="iconfont iconfabu"
        type="primary"
        size="small"
        >发布</el-button
      >
      <el-button
        v-if="isView && $route.query.state == 'chehui'"
        @click="handleCountermand"
        class="iconfont iconchehui"
        type="primary"
        size="small"
        >撤回</el-button
      >
      <el-button
        @click="handleBack"
        class="iconfont iconfanhui1"
        type="primary"
        size="small"
        >返回</el-button
      >
    </el-row>
  </div>
</template>

<script>
import {
  update,
  detail,
} from "@/api/transaction/tradePlan/goodsSourceTable/index.js";
import {
  updateTurnoverEnd,
  selectTurnoverEndDetail,
} from "@/api/transaction/trading/transactionResults/index.js";

import { dateTimeFormat } from "@/utils/index";

import KindEditor from "@/components/common/kindeditor";
export default {
  components: {
    KindEditor,
  },
  data() {
    return {
      textarea: `<p><span>天津市粮食储备有限公司竞价采购国产硬质白小麦</span><br/><span>单位:吨、元/吨</span><br/><table cellpadding="2"cellspacing="0"border="1"style="color:#000000;font-size:16px;background-color:#f3f3f3;width:960px;"><tbody><tr><td >序号<br/></td><td >承储单位<br/></td><td >储存地点<br/></td><td >品种<br/></td><td >数量<br/></td><td >生产年度<br/></td><td >色泽气味<br/></td><td >提货期限<br/></td></tr><tr><tr><td><br/></td><td><br/></td><td><br/></td><td><br/></td><td><br/></td><td><br/></td><td><br/></td><td><br/></td><td><br/></td><td>正常</td><td>1999</td></tr></tbody></table></p>`,
      detailForm: {
        mxfbr: sessionStorage.getItem("mxfbr") || "中国天津粮油批发交易市场",
        mxzw: sessionStorage.getItem("mxzw") || "",
        mxbt: sessionStorage.getItem("mxbt") || "",
      },
      wtbm: "",
      isView: false,
      tableData: [],
      isValid: "",
      jyrq: "",
      tipmsg: "",
    };
  },
  created() {
    this.getDetail();
    if (this.$route.query.state != "edit") {
      this.isView = true;
    }
  },
  methods: {
    handleBack() {
      this.$router.push({ name: "transactionResults" });
    },
    onContentChange(val) {
      this.detailForm.fwb = val;
    },
    async checkInput() {
      await this.$refs.detailForm.validate((valid) => {
        if (!valid) this.$message.warning("请先完成必填项");
        this.isValid = valid;
      });
    },
    handleCountermand() {
      this.$confirm("将撤销当前发布的交易明细,是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.detailForm.fbzt = "2";
        this.detailForm.fbztmc = "清单已撤回";
        this.tipmsg = "撤回成功!";
        this.update();
      });
    },
    getDetail() {
      selectTurnoverEndDetail({
        jgbm: this.$route.query.jgbm,
      }).then((res) => {
        if (res.infoCode === 200) {
          // var list = res.data;
          var _tbody = "";
          var jysl = "";
          var cjsl = "";
          this.detailForm = res.data;
          // list.forEach((item, index) => {
          var _tr = `<tr>
                            <td>
                                ${this.detailForm.pzmc}<br />
                            </td>
                            <td>
                                ${this.detailForm.dj}<br />
                            </td>
                            <td>
                                ${this.detailForm.jysl}<br />
                            </td>
                            <td>
                                ${this.detailForm.cjsl}<br />
                            </td>
                            <td>
                                ${this.detailForm.zdcjj}<br />
                            </td>
                            <td>
                                ${this.detailForm.zgcjj}<br />
                            </td>
                            <td>
                                ${this.detailForm.jj}<br />
                            </td>
                            <td>
                                ${this.detailForm.cjl}<br />
                            </td>
                        </tr>`;
          // _sum += item.lssl;
          _tbody += _tr;
          // });

          if (!this.detailForm.fwb) {
            this.detailForm.fwb = `
              <p style="margin:5px 50px;">
                <div style="text-align:center;">
                  <span style="font-size:20px;">
                    ${this.detailForm.wtfmc}${this.detailForm.jylxmc}${this.detailForm.lsxzmc}${this.detailForm.pzmc}
                  </span>
                </div>
                <br />
                <div style="text-align:right;">
                  <span>单位:吨、元/吨</span>
                </div>
                <br />
                <table
                  cellpadding="2"
                  cellspacing="0"
                  border="1"
                  style="color:#000000;font-size:16px;background-color:white;width:960px;"
                >
                  <tbody>
                    <tr>
                      <td>
                        品种
                        <br />
                      </td>
                      <td>
                        底价
                        <br />
                      </td>
                      <td>
                        交易数量
                        <br />
                      </td>
                      <td>
                        成交数量
                        <br />
                      </td>
                      <td>
                        最低成交价
                        <br />
                      </td>
                      <td>
                        最高成交价
                        <br />
                      </td>
                      <td>
                        均价
                        <br />
                      </td>
                      <td>
                        成交率
                        <br />
                      </td>
                    </tr>
                    <tr>
                      <td>
                        合计
                        <br />
                      </td>
                      <td>
                        <br />
                      </td>
                      <td>
                      ${this.detailForm.jysl}
                        <br />
                      </td>
                      <td>
                      ${this.detailForm.cjsl}
                        <br />
                      </td>
                      <td>
                        <br />
                      </td>
                      <td>
                        <br />
                      </td>
                      <td>
                        <br />
                      </td>
                      <td>
                        <br />
                      </td>
                    </tr>
                    ${_tbody}
                  </tbody>
                </table>
              </p>
            `;
            // this.tableData = list;
          }
          console.log(this.detailForm.fwb, "this.detailForm.fwb");
        }
      });
    },
    // async getDetail() {

    //     var res = await detail(this.wtbm)
    //     if (res && res.infoCode === 200) {
    //         this.detailForm = res.data
    //         if (!res.data.fbr) {
    //             this.detailForm.fbr = sessionStorage.getItem('deptName')
    //         }
    //     }
    // },
    // update() {
    //     update({
    //         ...this.detailForm
    //     }).then(res => {
    //         if (res.infoCode === 200) {
    //             this.$message.success(res.msg)
    //             this.$router.push('index')
    //             return
    //         }
    //         this.$message.error(res.msg)
    //     })
    // },
    update() {
      updateTurnoverEnd(this.detailForm).then((res) => {
        if (res.infoCode === 200) {
          this.$message.success(this.tipmsg);
          this.$router.push("index");
          return;
        }
        this.$message.error(res.msg);
      });
    },
    async handleSave() {
      // await this.checkInput()
      // if (!this.isValid) return
      this.detailForm.fbzt = "0";
      this.detailForm.fbztmc = "待发布";
      this.tipmsg = "保存成功!";
      this.update();
    },
    async handlePublish() {
      await this.checkInput();
      if (!this.isValid) return;
      // this.tableData.forEach((item) => {
      //   item.zt = "91000001";
      //   item.ztmc = "待提交";
      // });
      this.detailForm.fbsj = dateTimeFormat(new Date());
      this.detailForm.fbzt = "1";
      this.detailForm.fbztmc = "已发布";
      this.tipmsg = "发布成功!";
      this.update();
    },
  },
};
</script>

<style lang="scss" scoped>
.publish-main {
  width: 90%;
  margin: 0 auto;
  padding: 20px;
}
</style>
