<template>
  <div class="content-main">
    <el-row>
      <el-form style="width:100%;" ref="formDetail" label-width="100px" :model="formDetail">
        <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="cslx">
              <el-select
                clearable
                class="inputWid"
                v-model="formDetail.cslx"
                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"
                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
                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="申诉附件" prop="reason">
              <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="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>
          <el-col :span="12">
            <el-form-item label="回复人" prop="hfr">
              <el-input clearable class="inputWid" disabled v-model="formDetail.hfr"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="回复时间" prop="hfsj">
              <el-input clearable class="inputWid" disabled v-model="formDetail.hfsj"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="回复类型" prop="hflx">
              <el-radio-group @change="hflxChange" v-model="formDetail.hflx" :disabled="disFlag">
                <el-radio :label="0">仅申请方</el-radio>
                <el-radio :label="1">交易双方</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-show="bscFlag">
          <el-col :span="24">
            <el-form-item label="被申诉方通知" prop="bcstz">
              <el-input
                type="textarea"
                clearable
                class="inputWid"
                :disabled="disFlag"
                v-model="formDetail.bcstz"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-show="bscFlag">
          <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 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 } 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: getNowDate(),
        csdw: sessionStorage.getItem("orgCode")
      },
      disFlag: false,
      bscFlag: false,
      lxOptions: [
        { name: "粮食数量", value: 0 },
        { name: "粮食质量", value: 1 },
        { name: "提货时间", value: 2 },
        { name: "其他", value: 3 }
      ],
      ccOptions: [],
      htOptions: [],
      fileList: [],
      fileList1: [],
      fileList2: []
    };
  },
  created() {
    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.hflx = 0;
            this.formDetail.hfr = sessionStorage.getItem("userName");
            this.formDetail.hfsj = getNowDate();
          }
          this.hflxChange(this.formDetail.hflx);
          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.tzfj) {
            fileInfo(this.formDetail.tzfj).then(res => {
              this.fileList2 = res.data;
            });
          }
        }
      });
    }
  },
  methods: {
    hflxChange(val) {
      val == 1 ? (this.bscFlag = true) : (this.bscFlag = false);
    },
    handleSave() {
      this.formDetail.cszt = "2";
      this.formDetail.csztmc = "已处理";
      let arr = [];
      this.fileList1.map(item => {
        if (item.response) {
          arr.push(item.response.data.id);
        } else {
          arr.push(item.id);
        }
      });
      let arr1 = [];
      this.fileList2.map(item => {
        if (item.response) {
          arr1.push(item.response.data.id);
        } else {
          arr1.push(item.id);
        }
      });
      this.formDetail.dffj = arr.join(",");
      this.formDetail.tzfj = arr1.join(",");
      this.formDetail.csbm = this.$route.query.csbm;

      updateComplain(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>