<template>
  <!-- 审核详情 -->
  <el-dialog :title="diatitle" v-model="open" width="650px" append-to-body>
    <el-form
      ref="dkjbxxRef"
      :model="hgxform"
      :rules="rules"
      label-width="100px"
    >
      <el-row>
        <el-col :span="16">
          <el-form-item label="图斑编号："> {{ hgxform.dkbh }} </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="监测面积(亩):">
            {{ hgxform.dkmj }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="是否拆分：" prop="splitType">
        <el-radio-group
          v-model="hgxform.splitType"
          :disabled="!action"
          @change="radioChange"
        >
          <el-radio :label="0" size="large">是</el-radio>
          <el-radio :label="1" size="large">否</el-radio>
        </el-radio-group>
        <div class="splitbtns" v-if="hgxform.splitType == 0 && action">
          <el-upload
            multiple
            :action="uploadFileUrl"
            :file-list="upfileList"
            :limit="1"
            :on-error="handleUploadError"
            :on-success="uploadSuccess"
            :show-file-list="false"
            :headers="headers"
            class="upload-file"
            ref="splitfileUpload"
          >
            <el-button type="primary">上传拆分数据</el-button>
          </el-upload>

          <el-button type="primary">在线拆分</el-button>
          <el-button type="primary" @click="clear">清除</el-button>
        </div>
      </el-form-item>
      <tablePage
        v-if="!hgxform.splitType"
        :cloumn="VoHeader"
        :table="{ total: 20, data: hgxform.hgxVoList }"
        :indexed="false"
        :check="false"
        layout=""
      >
        <template #decide="{ row }">
          <el-select
            v-model="row.decide"
            placeholder="请选择"
            :disabled="!action"
            @change="getdecideTree"
          >
            <el-option
              v-for="dict in hgx_decide"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </template>
        <template #decideType="{ row }">
          <el-tree-select
            v-model="row.decideType"
            :data="decList[row.decide]"
            :props="{
              value: 'dictValue',
              label: 'dictLabel',
              children: 'children',
            }"
            value-key="dictValue"
            default-expanded-keys
            :disabled="!action"
          />
        </template>
        <template #vnotes="{ row }">
          <el-input
            v-model="row.notes"
            placeholder="请输入内容"
            :disabled="!action"
          />
        </template>
        <template #vaction="{ row }">
          <span class="usable" @click="fly(row)">定位</span>
        </template>
      </tablePage>
      <div v-if="hgxform.splitType">
        <el-form-item label="判定结论：" prop="decide" :disabled="!action">
          <el-select
            v-model="hgxform.decide"
            placeholder="请选择"
            :disabled="!action"
            @change="getdecideTree"
          >
            <el-option
              v-for="dict in hgx_decide"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="违法类型/合法情形："
          prop="decideType"
          :disabled="!action"
          label-width="160px"
        >
          <el-tree-select
            v-model="hgxform.decideType"
            :data="decList[hgxform.decide]"
            :props="{
              value: 'dictValue',
              label: 'dictLabel',
              children: 'children',
            }"
            value-key="dictValue"
            default-expanded-keys
            :disabled="!action"
          />
        </el-form-item>
      </div>
      <el-form-item label=""> </el-form-item>
      <el-form-item label="其他说明：" prop="notes">
        <el-input
          v-model="hgxform.notes"
          type="textarea"
          placeholder="请输入内容"
          :disabled="!action"
        />
      </el-form-item>
      <el-form-item label="附件材料：">
        <el-upload
          v-if="action"
          multiple
          :action="uploadFileUrl"
          :file-list="hgxform.fjs"
          :limit="10"
          :on-error="handleUploadError"
          :on-success="handleUploadSuccess"
          :show-file-list="false"
          :headers="headers"
          class="upload-file"
          ref="fileUpload"
        >
          <el-button type="primary">上传</el-button>
        </el-upload>
      </el-form-item>
      <tablePage
        :cloumn="fileHeader"
        :table="{ total: 20, data: hgxform.fjs }"
        :indexed="false"
        :check="false"
        layout=""
      >
        <template #faction="{ row, $index }">
          <span class="usable" @click="preview(row)">查看</span>
          <span class="usable" @click="download(row)"> 下载 </span>
          <span class="usable" v-if="action" @click="handleDelete($index)">
            删除
          </span>
        </template>
      </tablePage>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="open = false">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup name="details">
import { getToken } from "@/utils/auth";
import {
  hgxinfo,
  hgxDkjbxx,
  getdecTree,
  hgxSplit,
} from "@/api/rsmonitoring/dkjbxx";

const { proxy } = getCurrentInstance();
const { hgx_decide } = proxy.useDict("hgx_decide");
const uploadFileUrl = ref(
  import.meta.env.VITE_APP_BASE_API + "/file/upload/v1"
);
const headers = ref({ Authorization: "Bearer " + getToken() });
const VoHeader = ref([
  { label: "图斑支号", prop: "sort", align: "center", width: "80px" },
  { label: "面积(亩)", prop: "area", width: "80px" },
  { label: "合法性判定", slot: "decide", width: "120px" },
  { label: "违法类型/合法情形", slot: "decideType", width: "150px" },
  { label: "说明", slot: "vnotes" },
  { label: "操作", slot: "vaction", width: "80px", align: "center" },
]);
const fileHeader = ref([
  { label: "文件名称", prop: "fjName", align: "center" },
  { label: "文件格式", prop: "fjType", width: "120px" },
  { label: "文件大小(M)", prop: "fjSize", width: "120px" },
  { label: "操作", slot: "faction", width: "120px", align: "center" },
]);
const resultdata = reactive({
  open: false,
  action: false,
  diatitle: "",
  decList: {},
  upfileList: [],
  hgxform: { hgxVoList: [], fjs: [] },
});

const { open, action, diatitle, decList, upfileList, hgxform } =
  toRefs(resultdata);
const emit = defineEmits(["reset"]);
function moreAct(actitem, infoObj) {
  diatitle.value = `合法性判定结果`;
  open.value = true;
  action.value = false;
  let pram = {
    dkid: infoObj.id,
    auditflowStep: actitem.auditflowStep,
    auditflowId: actitem.id,
  };
  hgxinfo(pram).then((res) => {
    hgxform.value = res.data || {};
  });
}
function getdecideTree(val) {
  if (!decList.value[val])
    getdecTree({ dictType: `hgx_decide:${val}` }).then((res) => {
      decList.value[val] = res.data;
    });
}

function operate(infoObj, aStep) {
  diatitle.value = `合法性判定`;
  open.value = true;
  action.value = true;
  hgxform.value.dkjbxxId = infoObj.id;
  hgxform.value.dkbh = infoObj.dkbh;
  hgxform.value.dkmj = infoObj.dkmj;
  hgxform.value.auditflowStep = aStep;
}
function radioChange(val) {
  hgxform.value.hgxVoList = [];
}
function clear() {
  hgxform.value.hgxVoList = [];
  upfileList.value = [];
}
function uploadSuccess(res, file) {
  if (res.code === 200) {
    // proxy.$modal.closeLoading();
    upfileList.value = [];
    // hgxform.value.dkbh
    hgxSplit({ path: res.data.path, dkbh: "1501252024050806280002" }).then(
      (res) => {
        if (res.code == 200) hgxform.value.hgxVoList = res.data;
      }
    );
  } else {
    proxy.$modal.closeLoading();
    proxy.$modal.msgError(res.msg);
    proxy.$refs.splitfileUpload.handleRemove(file);
  }
}
// 审核;
function submitForm() {
  if (!action.value) {
    open.value = false;
    return;
  }
  if (hgxform.value.splitType == 1) {
    hgxform.value.hgxVoList = [
      { decide: hgxform.value.decide, decideType: hgxform.value.decideType },
    ];
  }
  proxy.$refs["dkjbxxRef"].validate((valid) => {
    if (valid) {
      hgxDkjbxx(hgxform.value).then((res) => {
        proxy.$modal.msgSuccess("合法性判定成功");
        open.value = false;
        reset();
        emit("reset");
      });
    }
  });
}
function reset() {
  hgxform.value = { hgxVoList: [], fjs: [] };
}
function download(row) {
  window.open(row.fjUrl || row.fjPath);
}
function preview(row) {
  window.open(row.fjUrl || row.fjPath, "_blank");
}
defineExpose({ moreAct, operate });

// 上传失败
function handleUploadError(err) {
  proxy.$modal.msgError("上传文件失败");
}
function handleUploadSuccess(res, file) {
  if (res.code === 200) {
    hgxform.value.fjs.push({
      fjName: file.name,
      fjPath: res.data.path,
      fjUrl: res.data.url,
      fjSize: Number((file.size / 1024 / 1024).toFixed(2)),
      fjType: file.name.split(".").pop(),
    });
    proxy.$modal.closeLoading();
  } else {
    // number.value--;
    proxy.$modal.closeLoading();
    proxy.$modal.msgError(res.msg);
    proxy.$refs.fileUpload.handleRemove(file);
    // uploadedSuccessfully();
  }
}
function handleDelete(index) {
  hgxform.value.fjs.splice(index, 1);
}
</script>

<style>
.splitbtns {
  margin-left: 30px;
}
.upload-file {
  display: inline-block;
  margin-right: 20px;
}
</style>