<template>
  <div class="content-main">
    <el-row>
      <el-form
        style="width:100%;"
        ref="formDetail"
        label-width="100px"
        :model="formDetail"
        :rules="rules"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="申诉标题" prop="title">
              <el-input clearable class="inputWid" :disabled="disFlag" v-model="formDetail.title"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="类型" prop="cslx">
              <el-select
                clearable
                class="inputWid"
                v-model="formDetail.cslx"
                :disabled="disFlag"
                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="disFlag"
                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="disFlag"
                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="disFlag"
                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="disFlag"
                :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="!disFlag"
                >上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="申诉单位" prop="csdwmc">
              <el-input clearable class="inputWid" disabled v-model="formDetail.csdwmc"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申诉时间" prop="cssj">
              <el-input clearable class="inputWid" disabled v-model="formDetail.cssj"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="lineTop"></el-row>
        <el-row v-if="$route.query.state=='detail'&&formDetail.cszt==2">
          <el-col :span="24">
            <el-form-item label="申诉方答复" prop="csdf">
              <el-input
                type="textarea"
                clearable
                class="inputWid"
                :disabled="disFlag"
                v-model="formDetail.csdf"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="$route.query.state=='detail'&&formDetail.cszt==2">
          <el-col :span="24">
            <el-form-item label="答复附件">
              <el-upload
                disabled
                :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="false"
                >上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-row>
    <span class="detail-footer">
      <el-button
        @click="handleSave('submit')"
        type="primary"
        v-if="!disFlag"
        size="small"
        class="iconfont icontijiao"
      >提交</el-button>
      <el-button
        @click="handleSave('save')"
        type="primary"
        v-if="!disFlag"
        size="small"
        class="iconfont iconbaocun"
      >保存</el-button>
      <el-button @click="returnList" type="primary" size="small" class="iconfont iconfanhui">返回</el-button>
    </span>
  </div>
</template>
<script>
import {
  selectSiteAll,
  selectContracts,
  selectContractDetail,
  insertComplain,
  updateComplain,
  selectComplainDetail,
} from "@/api/transaction/transactionComplaint/transactionFiling.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: "",
        cslx: "",
        apcc: "",
        htbm: "",
        htbh: "",
        csfj: "",
        csdwmc: sessionStorage.getItem("orgName"),
        cssj: dateTimeFormat(new Date()),
        csdw: sessionStorage.getItem("orgCode"),
      },
      disFlag: false,
      lxOptions: [
        { name: "粮食数量", value: 0 },
        { name: "粮食质量", value: 1 },
        { name: "提货时间", value: 2 },
        { name: "其他", value: 3 },
      ],
      ccOptions: [],
      htOptions: [],
      fileList: [],
      fileList1: [],
      rules: {
        title: [
          {
            required: true,
            max: 100,
            message: "请输入申诉标题(限100字符)",
            trigger: "blur",
          },
        ],
        cslx: [{ required: true, message: "请选择类型", trigger: "change" }],
        ccbm: [{ required: true, message: "请选择场次", trigger: "change" }],
        htbm: [{ required: true, message: "请选择合同", trigger: "change" }],
        reason: [
          {
            required: true,
            max: 1000,
            message: "请输入申诉原因(限1000字符)",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getccfList();
    if (this.$route.query.state == "detail") {
      this.disFlag = true;
    } else {
      this.disFlag = false;
    }
    if (this.$route.query.csbm) {
      selectComplainDetail({ csbm: this.$route.query.csbm }).then((res) => {
        if (res.infoCode == 200) {
          this.formDetail = res.data;
          if (this.$route.query.state == "edit") {
            (this.formDetail.csdwmc = sessionStorage.getItem("orgName")),
              (this.formDetail.cssj = dateTimeFormat(new Date())),
              (this.formDetail.csdw = sessionStorage.getItem("orgCode"));
          }
          if (this.formDetail.csfj) {
            fileInfo(this.formDetail.csfj).then((res) => {
              this.fileList = res.data;
            });
          }
          if (this.formDetail.dffj) {
            fileInfo(this.formDetail.dffj).then((res) => {
              this.fileList1 = 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) {
      if (val == "submit") {
        this.$refs["formDetail"].validate((valid) => {
          if (valid) {
            this.formDetail.cszt = "1";
            this.formDetail.csztmc = "已提交";
            this.formDetail.url = `/transactionComplaint/handle/detail`;
            this.formDetail.itemQuery = JSON.stringify({
              state: "edit",
              idKey: "csbm",
            });
            this.formDetail.itemQueryHaveDone = JSON.stringify({
              state: "detail",
              idKey: "csbm",
            });
            this.save();
          }
        });
      } else {
        this.formDetail.cszt = "0";
        this.formDetail.csztmc = "待提交";
        this.save();
      }
    },
    save() {
      this.formDetail.cslxmc = getCodeName(
        this.formDetail.cslx,
        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.fileList.map((item) => {
        if (item.response) {
          arr.push(item.response.data.id);
        } else {
          arr.push(item.id);
        }
      });
      this.formDetail.csfj = arr.join(",");
      this.formDetail.sjlx = 0;
      if (this.$route.query.csbm) {
        this.formDetail.csbm = this.$route.query.csbm;
        updateComplain(this.formDetail).then((res) => {
          if (res.infoCode == 200) {
            this.$message.success("保存成功！");
            this.returnList();
          }
        });
      } else {
        insertComplain(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}？`, "提示");
    },
  },
};
</script>
<style scoped>
.inputWid {
  width: 90%;
}
.lineTop {
  margin: 10px 0 20px 0;
  border-top: 1px solid;
}
</style>