<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="mxbt"
      >
        <el-input v-model="detailForm.mxbt" :disabled="isView"></el-input>
      </el-form-item>
      <el-form-item
        label="发布人"
        :rules="[{ required: true, message: '请输入发布人', trigger: 'blur' }]"
        prop="mxfbr"
      >
        <el-input v-model="detailForm.mxfbr" :disabled="isView"></el-input>
      </el-form-item>
      <el-form-item
        label="公告内容"
        :rules="[
          { required: true, message: '请输入公告内容', trigger: 'blur' },
        ]"
        prop="mxzw"
      >
        <el-input
          v-if="isView"
          v-html="detailForm.mxzw"
          :disabled="isView"
          type="textarea"
          :autosize="{ minRows: 4 }"
        ></el-input>
        <kind-editor
          v-if="!isView"
          id="editor_id"
          height="500px"
          width="100%"
          :content="detailForm.mxzw"
          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"
        @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 KindEditor from "@/components/common/kindeditor";
export default {
  components: {
    KindEditor,
  },
  data() {
    return {
      textarea: `<p><br/><table cellpadding="2"cellspacing="0"border="1"style="color:#000000;font-size:16px;background-color:#f3f3f3;width:960px;"><tbody><tr><td colspan="4">交易日期:<br/></td><td><br/></td><td><br/></td><td><br/></td><td><br/></td><td><br/></td><td colspan="2">计量单位:吨<br/></td></tr><tr><td rowspan="2">序号<br/></td><td rowspan="2">承储单位<br/></td><td rowspan="2">储存地点<br/></td><td rowspan="2">品种<br/></td><td rowspan="2">数量<br/></td><td rowspan="2">生产年度<br/></td><td colspan="3">质量指标<br/></td><td rowspan="2">色泽气味<br/></td><td rowspan="2">提货期限<br/></td></tr><tr><td>容量g/L</td><td>水分%</td><td>杂质%</td></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: "",
    };
  },
  beforeDestroy() {
    sessionStorage.removeItem("mxbt");
    sessionStorage.removeItem("mxzw");
    sessionStorage.removeItem("mxfbr");
  },
  created() {
    let lsxz = {
      2: "市级储备粮",
      3: "区级储备粮",
      4: "贸易粮",
    };
    // state 0 发布 1 详情
    let { state, wtbm, jylx, jyrq, lsxzbm } = this.$route.query;
    this.jyrq = jyrq;
    this.detailForm.wtbm = wtbm;
    this.detailForm.jylx = jylx;
    this.detailForm.lsxzbm = lsxzbm;
    this.detailForm.lsxzmc = lsxz[lsxzbm];
    this.getDetail();
    if (state == 1) {
      this.isView = true;
    }
  },
  methods: {
    handleBack() {
      sessionStorage.removeItem("mxbt");
      sessionStorage.removeItem("mxzw");
      sessionStorage.removeItem("mxfbr");
      this.$router.push("index");
    },
    async checkInput() {
      await this.$refs.detailForm.validate((valid) => {
        if (!valid) this.$message.warning("请先完成必填项");
        this.isValid = valid;
      });
    },
    onContentChange(val) {
      this.detailForm.mxzw = val;
    },
    handleCountermand() {
      this.$confirm("将撤销当前发布的交易明细,是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.detailForm.hybzt = "91000051";
        this.detailForm.hybztmc = "清单已撤回";
        this.detailForm.fbzt = "0";
        this.detailForm.fbztmc = "暂存";
        this.tipmsg = "撤回成功!";
        this.update();
      });
    },
    getDetail() {
      detail({
        wtbm: this.detailForm.wtbm,
        // jylx: this.detailForm.jylx,
        sjlx: 1,
      }).then((res) => {
        if (res.infoCode === 200) {
          var list = res.data;
          var _tbody = "";
          var _sum = 0;
          list.forEach((item, index) => {
            var _tr = `<tr>
                            <td>
                                ${index + 1}<br />
                            </td>
                            <td>
                                ${item.bdh || ""}<br />
                            </td>
                            <td>
                                ${item.dwmc || ""}<br />
                            </td>
                            <td>
                                ${item.ccdd || ""}<br />
                            </td>
                            <td>
                                ${item.pzmc || ""}<br />
                            </td>
                            <td>
                                ${item.lssl || ""}<br />
                            </td>
                            <td>
                                ${item.scnd || ""}<br />
                            </td>
                            <td>
                                ${item.rz || ""}<br />
                            </td>
                            <td>
                                ${item.sf || ""}<br />
                            </td>
                            <td>
                                ${item.zhaz || ""}<br />
                            </td>
                            <td>
                                ${item.szqw || ""}<br />
                            </td>
                            <td>
                                ${item.thqx || ""}<br />
                            </td>
                        </tr>`;
            _sum += item.lssl;
            _tbody += _tr;
          });
          this.detailForm.mxzw =
            sessionStorage.getItem("mxzw") ||
            `<p><br/><table cellpadding="2"cellspacing="0"border="1"style="color:#000000;font-size:16px;background-color:white;width:960px;"><tbody><tr><td colspan="4">交易日期:${this.jyrq}<br/></td><td><br/></td><td><br/></td><td><br/></td><td><br/></td><td><br/></td><td colspan="3">计量单位:吨<br/></td></tr><tr><td rowspan="2">序号<br/></td><td rowspan="2">标的号<br/></td><td rowspan="2">承储单位<br/></td><td rowspan="2">储存地点<br/></td><td rowspan="2">品种<br/></td><td rowspan="2">数量<br/></td><td rowspan="2">生产年度<br/></td><td colspan="3">质量指标<br/></td><td rowspan="2">色泽气味<br/></td><td rowspan="2">提货期限<br/></td></tr><tr><td>容量g/L</td><td>水分%</td><td>杂质%</td></tr>${_tbody}<tr><td>合计<br/></td><td><br/></td><td><br/></td><td><br/></td><td>${_sum}<br/></td><td><br/></td><td><br/></td><td><br/></td><td><br/></td><td></td><td></td><td></td></tr></tbody></table></p>`;
          this.tableData = list;
        }
      });
    },
    // 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() {
      update({
        details: this.tableData,
        entryAndExitOrderVO: 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.tipmsg = "保存成功!";
      this.update();
    },
    async handlePublish() {
      await this.checkInput();
      if (!this.isValid) return;
      this.tableData.forEach((item) => {
        item.zt = "91000001";
        item.ztmc = "待提交";
      });
      this.detailForm.hybzt = "91000048";
      this.detailForm.hybztmc = "已发布";
      this.tipmsg = "发布成功!";
      this.update();
    },
  },
};
</script>

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