<template>
  <div class="content-main">
    <template v-if="pageDisplay == 1">
      <el-form
        width="100%"
        label-width="120px"
        :model="detailForm"
        ref="detailForm"
        :disabled="showType"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item
              label="公告标题:"
              :rules="{
                required: true,
                message: '请填写公告标题',
                trigger: 'blur',
              }"
              prop="ggbt"
            >
              <el-input
                clearable
                style="width: 91%"
                v-model="detailForm.ggbt"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="来源:" prop="fbr">
              <el-input
                clearable
                style="width: 91%"
                v-model="detailForm.fbr"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item
              label="发布内容:"
              prop="ggzw"
              :rules="[
                {
                  required: true,
                  message: '请填写发布内容',
                  trigger: ['blur'],
                },
              ]"
            >
              <kind-editor
                id="detailText"
                height="400px"
                width="100%"
                :readonly="showType"
                :content="detailForm.ggzw"
                pluginsPath="/static/kindeditor/plugins/"
                :loadStyleMode="false"
                @on-content-change="onContentChange"
              ></kind-editor>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row>
        <div style="text-align: center">
          <el-button
            type="primary"
            @click="turnPage('next')"
            size="small"
            icon="iconfont iconxiayibu"
            >下一页</el-button
          >
          <!-- <el-button type="primary" @click="scalePlanIssuedDetails" size="medium" class="el-icon-right">下一页</el-button> -->
          <el-button
            type="primary"
            size="small"
            @click="scalePlanReturn"
            class="iconfont iconfanhui"
            >返回</el-button
          >
        </div>
      </el-row>
    </template>
    <template v-else>
      <el-form
        width="100%"
        label-width="120px"
        :model="detailFormNext"
        ref="detailFormNext"
        :disabled="showType"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item
              label="公告标题:"
              :rules="{
                required: true,
                message: '请填写公告标题',
                trigger: 'blur',
              }"
              prop="hwggbt"
            >
              <el-input
                clearable
                style="width: 91%"
                v-model="detailFormNext.hwggbt"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="来源:" prop="fbr">
              <el-input
                clearable
                style="width: 91%"
                v-model="detailForm.fbr"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="发布内容:"></el-form-item>
          </el-col>
        </el-row>
        <el-row class="table-show">
          <el-col :span="24" v-if="entryAndExitOrderVO.jyfx != 0" >
            <h2>
              {{ apcc }}{{ jyrq }}天津市地方政府储备（{{
                entryAndExitOrderVO.lsxzbm == 2 ? "区级" : "市级"
              }}）竞价交易货源表
            </h2>
			<div v-for="hyItem in hyTable" :key="index" >
			  <h3>
			    <span style="color: #ff0000">*</span> 承储单位：{{hyItem.dwmc
			    }}
			  </h3>
			  <el-table :data="hyItem.detailList" border stripe tooltip-effect="dark">
			    <el-table-column
			      prop="bdh"
			      label="标的"
			      align="center"
			      width="160"
			    ></el-table-column>
			    <el-table-column
			      prop="ccdd"
			      label="仓号"
			      align="center"
			      show-overflow-tooltip
			    ></el-table-column>
			    <el-table-column
			      prop="pzmc"
			      label="品种"
			      align="center"
			      show-overflow-tooltip
			    ></el-table-column>
			    <el-table-column
			      prop="scnd"
			      label="生产年份"
			      align="center"
			      show-overflow-tooltip
			    ></el-table-column>
			    <el-table-column
			      prop="lssl"
			      label="数量（吨）"
			      align="center"
			      show-overflow-tooltip
			    >
			      <template slot-scope="scope">
			        {{
			          String(scope.row.lssl).indexOf(".") > -1
			            ? parseFloat(scope.row.lssl).toFixed(3)
			            : scope.row.lssl
			        }}
			      </template>
			    </el-table-column>
			    <el-table-column
			      align="center"
			      prop="wcsj"
			      label="质量指标"
			      v-if="zlzbPz.indexOf('小麦粉') > -1"
			    >
			      <el-table-column align="center" prop="jgjd" label="加工精度">
			      </el-table-column>
			      <el-table-column align="center" prop="sf" label="水分%">
			      </el-table-column>
			      <el-table-column align="center" prop="hf" label="灰分%">
			      </el-table-column>
			      <el-table-column align="center" prop="szqw" label="气味口味">
			      </el-table-column>
			    </el-table-column>
			    <el-table-column
			      align="center"
			      prop="wcsj"
			      label="质量指标"
			      v-if="
			        zlzbPz.indexOf('小麦') > -1 && zlzbPz.indexOf('小麦粉') == -1
			      "
			    >
			      <el-table-column align="center" prop="sf" label="水分%">
			      </el-table-column>
			      <el-table-column align="center" prop="zhaz" label="杂质%">
			      </el-table-column>
			      <el-table-column align="center" prop="bwsl" label="不完善粒%">
			      </el-table-column>
			      <el-table-column align="center" prop="rz" label="容重g/L">
			      </el-table-column>
			    </el-table-column>
			    <el-table-column
			      align="center"
			      prop="wcsj"
			      label="质量指标"
			      v-if="zlzbPz.indexOf('米') > -1"
			    >
			      <el-table-column align="center" prop="sm" label="碎米%">
			      </el-table-column>
			      <el-table-column align="center" prop="sf" label="水分%">
			      </el-table-column>
			      <el-table-column align="center" prop="zhaz" label="杂质%">
			      </el-table-column>
			      <el-table-column
			        align="center"
			        prop="szqw"
			        label="色泽气味"
			        width="130"
			      >
			      </el-table-column>
			    </el-table-column>
			    <el-table-column
			      align="center"
			      prop="wcsj"
			      label="质量指标"
			      v-if="zlzbPz.indexOf('稻谷') > -1"
			    >
			      <el-table-column align="center" prop="ccl" label="出糙率%">
			      </el-table-column>
			      <el-table-column align="center" prop="sf" label="水分%">
			      </el-table-column>
			      <el-table-column align="center" prop="zhaz" label="杂质%">
			      </el-table-column>
			      <el-table-column
			        align="center"
			        prop="szqw"
			        label="色泽气味"
			        width="130"
			      >
			      </el-table-column>
			    </el-table-column>
			    <!-- <el-table-column label="质量指标" align="center" v-if="">
			      <el-table-column
			        prop="sf"
			        label="水分%"
			        align="center"
			        show-overflow-tooltip
			      ></el-table-column>
			      <el-table-column
			        prop="zhaz"
			        label="杂质%"
			        align="center"
			        show-overflow-tooltip
			      ></el-table-column>
			      <el-table-column
			        prop="bwsl"
			        label="不完善粒%"
			        align="center"
			        show-overflow-tooltip
			      ></el-table-column>
			      <el-table-column
			        prop="rz"
			        label="容重gL"
			        align="center"
			        show-overflow-tooltip
			      ></el-table-column>
			    </el-table-column> -->
			    <el-table-column
			      prop="wcsj"
			      label="完成时间"
			      align="center"
			      show-overflow-tooltip
			    ></el-table-column>
			    <el-table-column
			      prop="rknl"
			      label="出库能力（吨/天）"
			      align="center"
			      show-overflow-tooltip
			    ></el-table-column>
			  </el-table>	
			</div>
            
          </el-col>
          <el-col :span="24" v-if="entryAndExitOrderVO.jyfx != 1">
            <h2>
              {{ apcc }}{{ jyrq }}天津市地方政府储备（{{
                entryAndExitOrderVO.lsxzbm == 2 ? "区级" : "市级"
              }}）竞价交易入库安排
            </h2>
			<div v-for="apItem in apTable" :key='apItem.index'>
				<h3>
				  <span style="color: #ff0000">*</span> 承储单位：{{ apItem.dwmc }}
				</h3>
				<el-table
				  :data="apItem.detailList"
				  border
				  stripe
				  tooltip-effect="dark"
				>
				  <el-table-column
				    prop="bdh"
				    label="标的"
				    align="center"
				    width="160"
				  ></el-table-column>
				  <el-table-column
				    prop="ccdd"
				    label="仓号"
				    align="center"
				    show-overflow-tooltip
				  ></el-table-column>
				  <el-table-column
				    prop="pzmc"
				    label="品种"
				    align="center"
				    show-overflow-tooltip
				  ></el-table-column>
				  <el-table-column
				    prop="scnd"
				    label="生产年份"
				    align="center"
				    show-overflow-tooltip
				  ></el-table-column>
				  <el-table-column
				    prop="lssl"
				    label="数量（吨）"
				    align="center"
				    show-overflow-tooltip
				  >
				    <template slot-scope="scope">
				      {{
				        String(scope.row.lssl).indexOf(".") > -1
				          ? parseFloat(scope.row.lssl).toFixed(3)
				          : scope.row.lssl
				      }}
				    </template>
				  </el-table-column>
				  <el-table-column
				    prop="wcsj"
				    label="完成时间"
				    align="center"
				    show-overflow-tooltip
				  ></el-table-column>
				  <el-table-column
				    prop="rknl"
				    label="入库能力（吨/天）"
				    align="center"
				    show-overflow-tooltip
				  ></el-table-column>
				</el-table>
			</div>
            
          </el-col>
        </el-row>
      </el-form>
      <el-row>
        <div style="text-align: center">
          <el-button
            type="primary"
            @click="turnPage('prev')"
            size="small"
            icon="iconfont iconshangyibu"
            >上一页</el-button
          >
          <el-button
            type="primary"
            v-if="!showType"
            @click="announce"
            size="small"
            class="iconfont iconfabu"
            >发布</el-button
          >
          <el-button
            type="primary"
            size="small"
            @click="scalePlanReturn"
            class="iconfont iconfanhui"
            >返回</el-button
          >
        </div>
      </el-row>
    </template>
    <div style="height: 0px; overflow: hidden">
      <Caigou ref="caigou" />
      <Xiaoshou ref="xiaoshou" />
      <Shuangxiang ref="shuangxiang" />
      <Hwggzwtable ref="hwggzwtable" />
    </div>
  </div>
</template>

<script>
import {
  getDTODetail,
  updateNotice,
} from "@/api/transaction/announcement/index";
import Caigou from "./richText/caigou.vue";
import Xiaoshou from "./richText/xiaoshou.vue";
import Shuangxiang from "./richText/shuangxiang.vue";
import Hwggzwtable from "./richText/hwggzwtable.vue";
import KindEditor from "@/components/common/kindeditor";
const dayjs = require("dayjs");
export default {
  components: {
    KindEditor,
    Caigou,
    Xiaoshou,
    Shuangxiang,
    Hwggzwtable,
  },
  data() {
    return {
      showType: false,
      pageDisplay: 1,
      detailForm: {
        ggbt: "",
        fbr: "",
        ggzw: "",
      },
      detailFormNext: {
        hwggbt: "",
      },
      jyrq: "",
      apcc: "",
      hyTable: [],
      apTable: [],
      zlzbPz: "小麦",
      entryAndExitOrderVO: {},
    };
  },
  created() {
    this.apcc = this.$route.query.apcc ? this.$route.query.apcc : "";
    if (this.$route.query.type == "show") {
      this.showType = true;
    }
    // let caigouHtml = '<p>	<span style="color: rgb(0, 0, 0);">七、交易双方须承认并遵守《天津市地方政府储备竞价采购交易细则（试行）》（简称《细则》），详见“京津冀三地粮缘”微信公众号天津中心版块、“津粮信”微信公众号交易信息版块。</span>&nbsp;</p><p>	<span style="color: rgb(0, 0, 0);">八、其他：</span>&nbsp;</p><p>	<span style="color: rgb(0, 0, 0);">已经是国家粮食电子交易平台会员的企业，将《会员报名及承诺书》（见附件）提交给我市场工作人员，核对用户账户状态、保证金金额等信息无误后，即为报名成功。</span>&nbsp;</p><p>	<span style="color: rgb(0, 0, 0);">非国家粮食电子交易平台会员的企业按照要求到全国30家联网的地方国家粮食交易中心进行注册。注册成为国家粮食电子交易平台会员后方可进行交易报名。</span>&nbsp;</p><p>	交易双方均须交纳保证金。保证金为100元/吨，包括履约保证金80元/吨、交易保证金20元/吨,支持现金、金融保<span style="color: rgb(0, 0, 0);">函两种形式。政府有关部门对地方政府储备竞价交易保证金交纳方式和数额做出另行规定的，从其规定。</span>&nbsp;</p><p>	<span style="color: rgb(0, 0, 0);">采用现金形式支付保证金的企业，须按竞价交易意向在9月1日16：30前以电汇方式向我市场银行账户转入足额保证金（履约后保证金全部退回原账户）。</span></p><p>	<span style="color: rgb(0, 0, 0);">采用金融保函形式作为保证的企业，须在8月31日16：30前向我市场提交保函材料并出具保函机构的电话及联系人，保函真实性验证通过后，可作为交易保证金和履约保证金。</span></p><p>	<span style="color: rgb(0, 0, 0);">本次交易按照成交金额的1.5‰向买卖双方收取手续费。2021年度至今于本市场交易有违约情况的企业报名时须缴纳双倍保证金。</span>&nbsp;</p><p>	<span style="color: rgb(0, 0, 0);">报名电话：（022）24026287</span>&nbsp;</p><p>	<span style="color: rgb(0, 0, 0);">交易电话：（022）24023104、24026115</span>&nbsp;</p><p>	<span style="color: rgb(0, 0, 0);">商务处理：（022）24023104、24026286</span>&nbsp;</p><p>	<span style="color: rgb(0, 0, 0);">传真电话：（022）24023089</span>&nbsp;</p><p>	<span style="color: rgb(0, 0, 0);">账户名称：中国天津粮油批发交易市场</span>&nbsp;</p><p>	<span style="color: rgb(0, 0, 0);">开户行：农行天津长城公寓支行</span>&nbsp;</p><p>	<span style="color: rgb(0, 0, 0);">账&nbsp;号：02-174601040005196</span>&nbsp;</p><p>	<span style="color: rgb(0, 0, 0);">结算部电话：（022）24026269、24026268</span>&nbsp;</p><p>	<strong style="color: rgb(0, 0, 0);">特别提示</strong><span style="color: rgb(0, 0, 0);">：</span>&nbsp;</p><p>	<span style="color: rgb(0, 0, 0);">1、交易企业未成交的保证金和合同履约后被清退的保证金，我市场将通过农行天津长城公寓支行原路退回至企业付款账户。</span>&nbsp;</p><p>	<span style="color: rgb(0, 0, 0);">2、交易企业不允许代交保证金。</span>&nbsp;</p><p>	<span style="color: rgb(0, 0, 0);">3、全国粮食流通监管热线电话“12325”。</span>&nbsp;</p><p>	<span style="color: rgb(0, 0, 0);">4、为落实好新冠病毒疫情防控要求，参加竞价交易的企业交易前应充分了解承储库以及交易企业所在地区疫情防控政策，避免不能如期履约。&nbsp;</span></p><p>	&nbsp;</p><p>	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: rgb(0, 0, 0);">中国天津粮油批发交易市场</span></p><p><span style="color: rgb(0, 0, 0);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>2022年8月30日</p>'
    // this.detailForm.ggzw = caigouHtml
    this.getDetail();
  },
  methods: {
    getDetail() {
      getDTODetail(this.$route.query.wtbm)
        .then((res) => {
          if (res && res.infoCode === 200) {
            this.hyTable =
              res.data.hyList && res.data.hyList.length > 0
                ? res.data.hyList
                : "";
            if (res.data.hyList && res.data.hyList.length > 0) {
              this.zlzbPz = res.data.hyList[0].detailList[0].pzmc;
            }
            this.apTable = res.data.apList;
            this.entryAndExitOrderVO = res.data.entryAndExitOrderVO;
            this.jyrq = dayjs(this.entryAndExitOrderVO.jyrq).format(
              "YYYY年MM月DD日"
            );
            let titInfo = {
              jyrq: this.jyrq,
              lsxzbm: this.entryAndExitOrderVO.lsxzbm,
              jyfx: this.entryAndExitOrderVO.jyfx,
            };
            this.$refs.hwggzwtable.getParentData(
              this.hyTable,
              this.apTable,
              titInfo
            );

            if (!this.entryAndExitOrderVO.ggbt) {
              let ggbtpj =
                "(" +
                this.$route.query.apcc +
                " " +
                this.entryAndExitOrderVO.jyfxmc +
                " " +
                // this.entryAndExitOrderVO.pz+
                this.$route.query.pz +
                ")" +
                dayjs(this.entryAndExitOrderVO.jyrq).format("YYYY年MM月DD日") +
                "天津市地方政府储备竞价交易";
              // this.entryAndExitOrderVO.wtfmc+
              // this.entryAndExitOrderVO.jyfsmc+
              // '交易';

              this.detailForm.ggbt = ggbtpj + "公告";
              this.detailFormNext.hwggbt =
                ggbtpj +
                (this.entryAndExitOrderVO.jyfx == 0 ? "入库安排" : "货源表");
            } else {
              this.detailForm.ggbt = this.entryAndExitOrderVO.ggbt;
              this.detailForm.fbr = this.entryAndExitOrderVO.fbr;
              this.detailFormNext.hwggbt = this.entryAndExitOrderVO.hwggbt;
            }
            //采购  0   销售  1   购销双向 jyfs 2
            if (this.entryAndExitOrderVO.jyfx == 0) {
              this.$refs.caigou.getParentData(this.entryAndExitOrderVO);
              this.$nextTick(() => {
                this.detailForm.ggzw = this.$refs.caigou.$el.outerHTML;
                // this.detailForm.ggzw = this.$refs.hwggzwtable.$el.outerHTML
              });
            } else if (this.entryAndExitOrderVO.jyfx == 1) {
              this.$refs.xiaoshou.getParentData(this.entryAndExitOrderVO);
              this.$nextTick(() => {
                this.detailForm.ggzw = this.$refs.xiaoshou.$el.outerHTML;
              });
            } else if (this.entryAndExitOrderVO.jyfs == 2) {
              this.$refs.shuangxiang.getParentData(this.entryAndExitOrderVO);
              this.$nextTick(() => {
                this.detailForm.ggzw = this.$refs.shuangxiang.$el.outerHTML;
              });
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    onContentChange(val) {
      console.log(111, val);
      this.detailForm.ggzw = val;
    },
    announce() {
      let data = {
        ...this.entryAndExitOrderVO,
        ...this.detailForm,
        ...this.detailFormNext,
        hwggzw: this.$refs.hwggzwtable.$el.outerHTML,
        fbzt: 1,
        fbztmc: "已发布",
      };
      updateNotice(data).then((res) => {
        if (res && res.infoCode === 200) {
          this.$message({
            type: "success",
            message: "发布成功！",
          });
          this.scalePlanReturn();
        }
      });
    },
    turnPage(type) {
      if (type == "next") {
        this.pageDisplay = 2;
      } else {
        this.pageDisplay = 1;
      }
    },
    scalePlanReturn() {
      this.$router.push({
        name: "announcement",
      });
      this.detailForm = {};
    },
  },
};
</script>

<style lang="scss" scoped>
.table-show {
  margin-bottom: 20px;
  h2 {
    font-size: 24px;
    text-align: center;
    margin: 0px;
  }
}
</style>
