<template>
  <div class="publish-main">
    <el-form :model="detailForm" ref="detailForm" label-width="80px">
      <h2 style="text-align: center; font-weight: 600">交易公告</h2>
      <el-row>
        <el-form-item
          label="公告标题"
          :rules="[
            { required: true, message: '请输入公告标题', trigger: 'blur' },
          ]"
          prop="ggbt"
        >
          <el-input
            style="width: 90%"
            v-model="detailForm.ggbt"
            :disabled="isView"
          ></el-input>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item
          label="发布人"
          :rules="[
            { required: true, message: '请输入发布人', trigger: 'blur' },
          ]"
          prop="fbr"
        >
          <el-input
            style="width: 90%"
            v-model="detailForm.fbr"
            :disabled="isView"
          ></el-input>
        </el-form-item>
      </el-row>

      <el-row>
        <el-form-item
          label="公告内容"
          :rules="[
            { required: true, message: '请输入公告内容', trigger: 'blur' },
          ]"
          prop="ggzw"
        >
          <!-- <el-input v-model="detailForm.ggzw"  :disabled="isView" type="textarea" :autosize="{minRows:4}"></el-input> -->
          <el-col style="width: 90%">
            <quill-editor v-if="$route.query.state == 2" v-model="detailForm.ggzw" id="detailText"></quill-editor>
            <quill-editor v-else v-model="detailForm.ggzw"></quill-editor>
          </el-col>
        </el-form-item>
      </el-row>
    </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="$router.push('index')"
        class="iconfont iconfanhui"
        type="primary"
        size="small"
        >返回</el-button
      >
    </el-row>
  </div>
</template>

<script>
import {
  update,
  detail,
} from "@/api/transaction/tradePlan/outInDepotEntrust/index.js";
import { VueEditor } from "vue2-editor";
import { getNowDate } from "@/utils/index";
export default {
  components: {
    VueEditor,
  },
  data() {
    return {
      ggzw: `受天津市宝坻区粮食购销有限公司委托，中国天津粮油批发交易市场将于2019年3月12日上午10:30采用国家粮食电子交易平台（http://123.127.88.168:8099/tradeClient/login.jsp）举行天津市级储备粮竞价交易会。
一、品种、数量及生产年限：
拟竞价销售国产小麦，2014年产硬质白小麦数量为555.111吨、硬质红小麦数量为10654.889吨。国内凡依法注册具有粮食经营、加工资格的企业均可报名参加。
二、竞价交易方式：
本次竞价交易采用现场与远程相结合的网络电子竞价交易方式。
三、交易地点及看样：
中国天津粮油批发交易市场（河东区八纬路207号粮油大厦二楼多功能厅）。本次交易报名及看样时间为自公告之日起至3月11日下午16：30，看样地点：宝坻京东粮油储运贸易有限公司，联系方式：刘科长 15822560662
四、交款及交提货期限：
合同生效后，一次性或分批次将货款汇入天津市宝坻区粮食购销有限公司指定账户并于2019年5月30日前出库完毕。
五、其他：
有意向参与交易的会员应在竞价交易前认真研读交易公告、交易细则和国粮电[2017]8号文件，提前实地查看粮食实物质量，如未提前看样或看样后参与竞买的会员，均视同认可标的质量，粮食成交后不再对质量提出异议。
已经是国家粮食电子交易平台会员的企业报名时，需在汇出保证金后，将交易代表姓名及联系电话备注到汇款底联并传真至我市场。
非国家粮食电子交易平台会员的企业需携带下述资料到全国29家联网的地方国家粮食交易中心进行报名。报名后将保证金汇至我市场账户并将汇款底联传真至我市场。
报名所需材料如下：
（一）营业执照副本原件及加盖公章的复印件一份；
（二）收购资格证（收储、贸易企业）、生产许可证（生产加工企业）原件及加盖公章的复印件一份；
（三）法定代表人及经办人有效身份证(正反面)复印件各一份；
（四） 法定代表人签字并加盖公章的《交易授权书》一份；
（五）《会员交易资金电子结算告知书》一式两份并加盖公章；
（六）《会员权利与义务确认书》一式两份并加盖公章；
（七）《CWCA数字证书服务协议》一式两份并加盖公章；
（八） 此次办理CA认证共收取费用280元(含CA证书一年年费、电子签章及硬件一次性费用)，以后每年仅收取CA证书年费80元，上述费用由郑州华粮科技股份有限公司及西部安全认证中心有限责任公司收取；
（九）绑定银行账户需要提供银行开户相关资料或银行卡，包括：开户行、开户行全称、开户名、银行账号。
以上所需材料模板请于此链接下载：
（http://www.tjgrain.com/articleview.asp?articleid=91892）
参加网络竞价交易代表需按竞价交易意向预缴履约保证金80元/吨、预缴交易保证金20元/吨。保证金款必须在3月11日16：30前以电汇方式转入我市场以下银行账户（履约后保证金全部退回原账户）。本次交易免收买受人手续费。2018年度至今于本市场交易有违约情况的企业以及交易代表报名时需缴纳双倍交易资格保证金及手续费。
报名电话：（022）24023104、24026115、24026228
传真电话：（022）24023089、24026115
邮    箱：tianjinyewu1@163.com
账户名称：中国天津粮油批发交易市场
开 户 行：农行天津长城公寓支行
账    号：02-174601040005196
开 户 行：天津银行津工支行
账    号：158201201090024092
开 户 行：农发行天津市分行营业部
账    号：20312999900100000110391
电    话：（022）24026269、24026268
“津粮网”网址：http://www.tjgrain.com.cn
“津粮网”咨询电话：（022）24023094
特别提示：
1．  保证金款必须在3月11日16:30前汇到我市场银行账户，并经确认收妥后方可参加交易。
2．  代交保证金款单位必须出具承诺函或在银行票据上注明。
中国天津粮油批发交易市场
               ${getNowDate()}`,
      detailForm: {
        ggbt: "",
        fbr: "中国天津粮油批发交易市场",
        ggzw: "",
      },
      wtbm: "",
      isView: false,
      isValid: "",
    };
  },
  mounted() {
    if (!this.isView) return;
    this.$nextTick(() => {
      document
        .querySelector(".ql-editor")
        .setAttribute("contenteditable", "false");
    });
  },
  created() {
    // state 0 发布 1 修改 2 详情
    let { state, wtbm } = this.$route.query;
    this.wtbm = wtbm;
    this.getDetail();
    if (state == 2) {
      this.isView = true;
    }
  },
  methods: {
    async checkInput() {
      await this.$refs.detailForm.validate((valid) => {
        if (!valid) this.$message.warning("请先完成必填项");
        this.isValid = valid;
      });
    },
    async getDetail() {
      var res = await detail(this.wtbm);
      if (res && res.infoCode === 200) {
        this.detailForm = res.data;
        if (!res.data.fbr) {
          this.detailForm.fbr = "中国天津粮油批发交易市场";
        }
        if (!res.data.ggzw) {
          this.detailForm.ggzw = this.ggzw;
        }
        this.$refs.detailForm.resetFields();
      }
    },
    update(msg) {
      update({
        ...this.detailForm,
      }).then((res) => {
        if (res.infoCode === 200) {
          this.$message.success(msg);
          this.$router.push("index");
          return;
        }
        this.$message.error(res.msg);
      });
    },
    async handleSave() {
      // await this.checkInput()
      // if (!this.isValid) return
      this.detailForm.zt = this.detailForm.zt || "91000018";
      this.detailForm.ztmc = this.detailForm.ztmc || "已确认";
      this.detailForm.fbzt = "0";
      this.detailForm.fbztmc = "暂存";
      this.update("保存成功");
    },
    async handleCountermand() {
      this.$confirm("将撤销当前发布的公告,是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.detailForm.zt = "91000050";
        this.detailForm.ztmc = "公告已撤回";
        this.detailForm.fbzt = "0";
        this.detailForm.fbztmc = "暂存";
        this.update("撤回成功");
      });
    },
    async handlePublish() {
      await this.checkInput();
      if (!this.isValid) return;
      this.detailForm.zt = "91000048";
      this.detailForm.ztmc = "已发布";
      this.detailForm.fbzt = "1";
      this.detailForm.fbztmc = "已发布";

      this.update("发布成功");
    },
  },
};
</script>

<style lang="scss" scoped>
.publish-main {
  width: 80%;
  margin: 0 auto;
  padding: 20px;
}
#detailText /deep/ .ql-toolbar.ql-snow {
  display: none;
}
#detailText /deep/ .ql-container.ql-snow {
  border: 1px solid #ccc !important;
}
</style>
