<template>
  <div class="content-main">
    <el-row>
      <el-form
        style="width: 100%"
        ref="formDetail"
        label-width="110px"
        :model="formDetail"
        :rules="rules"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="通知标题" prop="title">
              <el-input
                clearable
                class="inputWid"
                disabled
                v-model="formDetail.title"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="类型" prop="tzlx">
              <el-select
                clearable
                class="inputWid"
                v-model="formDetail.tzlx"
                disabled
                placeholder="请选择类型"
              >
                <el-option
                  v-for="item in lxOptions"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="场次" prop="ccbm">
              <el-select
                class="inputWid"
                @change="ccChange"
                v-model="formDetail.ccbm"
                disabled
                clearable
                placeholder="请选择类型"
              >
                <el-option
                  v-for="item in ccOptions"
                  :key="item.ccbm"
                  :label="item.apcc"
                  :value="item.ccbm"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同" prop="htbm">
              <el-select
                clearable
                @change="htChange"
                class="inputWid"
                v-model="formDetail.htbm"
                disabled
                placeholder="请选择类型"
              >
                <el-option
                  v-for="item in htOptions"
                  :key="item.htbm"
                  :label="item.htbh"
                  :value="item.htbm"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="粮食性质" prop="lsxz">
              <el-input
                clearable
                class="inputWid"
                disabled
                v-model="formDetail.lsxz"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="品种" prop="pz">
              <el-input
                clearable
                class="inputWid"
                disabled
                v-model="formDetail.pz"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="买方" prop="ccmc">
              <el-input
                clearable
                class="inputWid"
                disabled
                v-model="formDetail.ccmc"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="卖方" prop="sgmc">
              <el-input
                clearable
                class="inputWid"
                disabled
                v-model="formDetail.sgmc"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="通知内容" prop="reason">
              <el-input
                type="textarea"
                clearable
                class="inputWid"
                disabled
                v-model="formDetail.reason"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="通知附件">
              <el-upload
                disabled
                :on-success="handleSuccess"
                class="upload-demo"
                :action="fileUrl"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                :file-list="fileList"
                style="width: 95%"
              >
                <el-button
                  type="primary"
                  size="small"
                  class="iconfont iconshangchuan"
                  v-if="false"
                  >上传</el-button
                >
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="通知类型" prop="fslx">
              <el-radio-group v-model="formDetail.fslx" disabled>
                <el-radio :label="0">仅委托方</el-radio>
                <el-radio :label="1">交易双方</el-radio>
                <el-radio :label="2">仅客户</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="通知人" prop="tzr">
              <el-input
                clearable
                class="inputWid"
                disabled
                v-model="formDetail.tzr"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="通知时间" prop="tzsj">
              <el-input
                clearable
                class="inputWid"
                disabled
                v-model="formDetail.tzsj"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="formDetail.ccdws == orgCode">
          <el-row class="lineTop"></el-row>
          <el-col :span="12">
            <el-form-item label="委托方回复人" prop="wtr">
              <el-input
                clearable
                class="inputWid"
                disabled
                v-model="formDetail.wtr"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="回复时间" prop="wtsj">
              <el-input
                clearable
                class="inputWid"
                disabled
                v-model="formDetail.wtsj"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="formDetail.ccdws == orgCode">
          <el-col :span="24">
            <el-form-item label="委托方回复详情" prop="wtdf">
              <el-input
                type="textarea"
                clearable
                class="inputWid"
                :disabled="disFlag"
                v-model="formDetail.wtdf"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="formDetail.ccdws == orgCode">
          <el-col :span="24">
            <el-form-item label="委托方附件">
              <el-upload
                :disabled="disFlag"
                :on-success="handleSuccess1"
                class="upload-demo"
                :action="fileUrl"
                :on-preview="handlePreview1"
                :on-remove="handleRemove1"
                :before-remove="beforeRemove1"
                :file-list="fileList1"
                style="width: 95%"
              >
                <el-button
                  type="primary"
                  size="small"
                  class="iconfont iconshangchuan"
                  v-if="!disFlag"
                  >上传</el-button
                >
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="formDetail.ccdws != orgCode">
          <el-row class="lineTop"></el-row>
          <el-col :span="12">
            <el-form-item label="客户回复人" prop="khr">
              <el-input
                clearable
                class="inputWid"
                disabled
                v-model="formDetail.khr"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="回复时间" prop="khsj">
              <el-input
                clearable
                class="inputWid"
                disabled
                v-model="formDetail.khsj"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="formDetail.ccdws != orgCode">
          <el-col :span="24">
            <el-form-item label="客户回复详情" prop="khdf">
              <el-input
                type="textarea"
                clearable
                class="inputWid"
                :disabled="disFlag"
                v-model="formDetail.khdf"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="formDetail.ccdws != orgCode">
          <el-col :span="24">
            <el-form-item label="客户附件">
              <el-upload
                :disabled="disFlag"
                :on-success="handleSuccess2"
                class="upload-demo"
                :action="fileUrl"
                :on-preview="handlePreview2"
                :on-remove="handleRemove2"
                :before-remove="beforeRemove2"
                :file-list="fileList2"
                style="width: 95%"
              >
                <el-button
                  type="primary"
                  size="small"
                  class="iconfont iconshangchuan"
                  v-if="!disFlag"
                  >上传</el-button
                >
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-row>
    <span class="detail-footer">
      <el-button
        @click="handleSave()"
        type="primary"
        v-if="!disFlag"
        size="small"
        class="iconfont icontijiao"
        >提交</el-button
      >
      <el-button
        @click="returnList"
        type="primary"
        size="small"
        class="iconfont iconfanhui"
        >返回</el-button
      >
    </span>
  </div>
</template>
<script>
import {
  selectSiteAll,
  selectContracts,
  selectContractDetail,
  insertNotice,
  updateNotice,
  selectNoticeDetail,
} from "@/api/transaction/transactionAdvise/index.js";
import { fileInfo } from "@/api/transaction/registrationFee/transactionSignup/index";
import { getNowDate, dateTimeFormat } from "@/utils/index";
import { getCodeName } from "@/utils/statusList";
import { FileApi } from "@/api/index";

export default {
  data() {
    return {
      fileUrl: `${FileApi}/file/upload`,
      formDetail: {
        lsxz: "",
        pz: "",
        ccmc: "",
        ccdw: "",
        sgmc: "",
        sgdw: "",
        reason: "",
        title: "",
        ccbm: "",
        tzlx: "",
        apcc: "",
        htbm: "",
        htbh: "",
        tzfj: "",
        tzr: "",
        tzsj: "",
        khr: "",
        khsj: "",

        // csdw: sessionStorage.getItem("orgCode")
      },
      orgCode: sessionStorage.getItem("orgCode"),
      disFlag: false,
      lxOptions: [
        { name: "粮食数量", value: 0 },
        { name: "粮食质量", value: 1 },
        { name: "提货时间", value: 2 },
        { name: "其他", value: 3 },
      ],
      ccOptions: [],
      htOptions: [],
      fileList: [],
      fileList1: [],
      fileList2: [],
      rules: {
        title: [{ required: true, message: "请输入通知标题", trigger: "blur" }],
        tzlx: [{ required: true, message: "请选择类型", trigger: "change" }],
        ccbm: [{ required: true, message: "请选择场次", trigger: "change" }],
        htbm: [{ required: true, message: "请选择合同", trigger: "change" }],
        reason: [
          { required: true, message: "请输入通知内容", trigger: "blur" },
        ],
        fslx: [{ required: true, message: "请选择通知类型", trigger: "blur" }],
      },
    };
  },
  created() {
    this.getccfList();
    if (this.$route.query.state == "detail") {
      this.disFlag = true;
    } else {
      this.disFlag = false;
    }
    if (this.$route.query.tzbm) {
      let data = {
        tzbm: this.$route.query.tzbm,
      };
      if (this.$route.query.ccdws == this.orgCode) {
        data.wtzt = 1;
      } else {
        data.khzt = 1;
      }
      selectNoticeDetail(data).then((res) => {
        if (res.infoCode == 200) {
          this.formDetail = res.data;
          if (this.$route.query.state == "edit") {
            if (this.formDetail.ccdws == this.orgCode) {
              (this.formDetail.wtr = sessionStorage.getItem("userName")),
                (this.formDetail.wtsj = dateTimeFormat(new Date()));
            } else {
              (this.formDetail.khr = sessionStorage.getItem("userName")),
                (this.formDetail.khsj = dateTimeFormat(new Date()));
            }
          }
          if (this.formDetail.tzfj) {
            fileInfo(this.formDetail.tzfj).then((res) => {
              this.fileList = res.data;
            });
          }
          if (this.formDetail.wtfj) {
            fileInfo(this.formDetail.wtfj).then((res) => {
              this.fileList1 = res.data;
            });
          }
          if (this.formDetail.khfj) {
            fileInfo(this.formDetail.khfj).then((res) => {
              this.fileList2 = res.data;
            });
          }
          if (this.formDetail.ccbm) {
            this.ccChange(this.formDetail.ccbm);
          }
        }
      });
    }
  },
  methods: {
    getccfList() {
      selectSiteAll().then((res) => {
        if (res.infoCode == 200) {
          this.ccOptions = res.data;
        }
      });
    },
    ccChange(val) {
      if (val) {
        selectContracts(val).then((res) => {
          if (res.infoCode == 200) {
            this.htOptions = res.data;
          }
        });
      }
    },
    htChange(val) {
      if (val) {
        selectContractDetail(val).then((res) => {
          if (res.infoCode == 200) {
            this.formDetail.lsxz = res.data.data.lsxz;
            this.formDetail.pz = res.data.data.pzmc;
            this.formDetail.ccmc = res.data.data.cmmc;
            this.formDetail.ccdw = res.data.data.cmdw;
            this.formDetail.sgdw = res.data.data.sgdw;
            this.formDetail.sgmc = res.data.data.sgmc;
          }
        });
      }
    },
    handleSave(val) {
      this.$refs["formDetail"].validate((valid) => {
        if (valid) {
          if (this.formDetail.ccdws == this.orgCode) {
            this.formDetail.wtzt = 1;
            this.formDetail.tzzt = "4";
            this.formDetail.tzztmc = "委托方已反馈";
          } else {
            this.formDetail.khzt = 1;
            this.formDetail.tzzt = "5";
            this.formDetail.tzztmc = "客户已反馈";
          }
          this.formDetail.itemUrlHaveDone = `/transactionAdvise/business/detail`;

          this.formDetail.itemQueryHaveDone = JSON.stringify({
            state: "detail",
            idKey: "tzbm",
          });

          this.save();
        }
      });
    },
    save() {
      // this.formDetail.tzlxmc = getCodeName(
      //   this.formDetail.tzlx,
      //   this.lxOptions,
      //   "value",
      //   "name"
      // );
      // this.formDetail.apcc = getCodeName(
      //   this.formDetail.ccbm,
      //   this.ccOptions,
      //   "ccbm",
      //   "apcc"
      // );
      // this.formDetail.htbh = getCodeName(
      //   this.formDetail.htbm,
      //   this.htOptions,
      //   "htbm",
      //   "htbh"
      // );
      let arr = [];
      this.fileList1.map((item) => {
        if (item.response) {
          arr.push(item.response.data.id);
        } else {
          arr.push(item.id);
        }
      });
      this.formDetail.wtfj = arr.join(",");
      let arr1 = [];
      this.fileList2.map((item) => {
        if (item.response) {
          arr1.push(item.response.data.id);
        } else {
          arr1.push(item.id);
        }
      });
      this.formDetail.khfj = arr1.join(",");

      if (this.$route.query.tzbm) {
        this.formDetail.tzbm = this.$route.query.tzbm;
        updateNotice(this.formDetail).then((res) => {
          if (res.infoCode == 200) {
            this.$message.success("保存成功！");
            this.returnList();
          }
        });
      } else {
        insertNotice(this.formDetail).then((res) => {
          if (res.infoCode == 200) {
            this.$message.success("保存成功！");
            this.returnList();
          }
        });
      }
    },
    returnList() {
      this.$router.go(-1);
    },
    handleSuccess(res, file, fileList) {
      this.fileList = fileList;
      this.$message.success("上传成功！");
    },
    handleRemove(res, file) {
      this.fileList = file;
    },
    handlePreview(file, fileList) {
      window.location.href = `${FileApi}/file/download?id=${
        file.response ? file.response.data.id : file.id
      }`;
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`, "提示");
    },

    handleSuccess1(res, file, fileList) {
      this.fileList1 = fileList;
      this.$message.success("上传成功！");
    },
    handleRemove1(res, file) {
      this.fileList1 = file;
    },
    handlePreview1(file, fileList) {
      window.location.href = `${FileApi}/file/download?id=${
        file.response ? file.response.data.id : file.id
      }`;
    },
    beforeRemove1(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`, "提示");
    },

    handleSuccess2(res, file, fileList) {
      this.fileList2 = fileList;
      this.$message.success("上传成功！");
    },
    handleRemove2(res, file) {
      this.fileList2 = file;
    },
    handlePreview2(file, fileList) {
      window.location.href = `${FileApi}/file/download?id=${
        file.response ? file.response.data.id : file.id
      }`;
    },
    beforeRemove2(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`, "提示");
    },
  },
};
</script>
<style scoped>
.inputWid {
  width: 90%;
}
.lineTop {
  margin: 10px 0 20px 0;
  border-top: 1px solid;
}
</style>