<template>
  <div style="padding: 10px 15px"  v-loading="loading">
    <div class="taskdetail">
      <div class="title">
        {{ facilite.ext1?.tz_ss_name }}设施详情

        <div class="btngroup">
          <el-button
            type="danger"
            @click="
              () => {
                router.back();
              }
            "
            >返回</el-button
          >
        </div>
      </div>
      <div class="card">
        <div class="title" style="position: relative">
          基本信息
          <div
            style="position: absolute; right: 10px; top: 0; color: #333; font-size: 20px"
          ></div>
        </div>
        <div class="body">
          <el-row>
            <el-col
              :span="6"
              v-for="key in [
                'tz_id',
                'tz_ss_name',
                'tz_ss_road_se',
                'tz_ss_info',
                'tz_area_new',
                'tz_ss_data_length',
                'tz_ss_dn',
                'tz_ss_time',
                'tz_ss_unit',
                'tz_ssly',
                'tz_jssj',
                'tz_ss_from',
                'tz_ss_pstz',
                'tz_ss_data_jing',
                'tz_ss_data_ysk',
                'tz_pfk',
              ]"
            >
              {{ getvaluebykey(key) }}
            </el-col>
            <el-col
              :span="4"
              v-for="key in [
                'tz_bz_dan',
                'tz_bz_shuang',
                'tz_bz_san',
                'tz_bz_si',
                'tz_bz_duo',
              ]"
            >
              {{ getvaluebykey(key) }}
            </el-col>
          </el-row>
        </div>
      </div>

      <div class="card">
        <div class="title" style="position: relative">
          补充信息
          <div
            style="position: absolute; right: 10px; top: 0; color: #333; font-size: 20px"
          >
            <el-button type="primary" @click="showbc = true">编辑</el-button>
          </div>
        </div>
        <div class="body">
          <el-row>
            <el-col
              :span="6"
              v-for="key in [
                'tz_ss_road',
                'tz_ss_road_start',
                'tz_ss_road_end',
                'tz_jgsj',
                'tz_ss_type',
                'tz_ss_data_main_length',
                'tz_ss_data_minor_length',
                'tz_ss_river',
                'tz_gwly',
                'tz_xlymc',
                'tz_pkbh',
              ]"
            >
              {{ getvaluebykey(key) }}
            </el-col>
            <el-col :span="24" v-for="key in ['tz_ss_more']">
              {{ getvaluebykey(key) }}
            </el-col>
          </el-row>
        </div>
      </div>

      <div class="card">
        <div class="title" style="position: relative">
          施工图纸
          <div
            style="position: absolute; right: 10px; top: 0; color: #333; font-size: 20px"
          >
            <el-button type="primary" @click="showpic = true">编辑</el-button>
          </div>
        </div>
        <div class="body">
          <el-row>
            <el-col :span="24">
              <ImagePreview
                v-model:src="facilite.ext1.pics"
                :height="'120px'"
                :width="'120px'"
              ></ImagePreview>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>

    <el-dialog v-model="showbc" title="设施补充信息编辑" width="80vw" draggable>
      <div>
        <el-form :model="facilite">
          <el-row>
            <el-col
              :span="8"
              style="padding-right: 10px"
              v-for="key in [
                'tz_ss_road',
                'tz_ss_road_start',
                'tz_ss_road_end',
                'tz_jgsj',
                'tz_ss_type',
                'tz_ss_data_main_length',
                'tz_ss_data_minor_length',
                'tz_ss_river',
                'tz_gwly',
                'tz_xlymc',
                'tz_pkbh',
              ]"
            >
              <el-form-item :label="getfacilitiesdesname(key).des + ':'">
                <el-input
                  v-model="facilite.ext1[key]"
                  :type="getfacilitiesdesname(key).type"
                  placeholder="请输入"
              /></el-form-item>
            </el-col>
            <el-col :span="24" v-for="key in ['tz_ss_more']">
              <el-form-item :label="getfacilitiesdesname(key).des + ':'">
                <el-input
                  v-model="facilite.ext1[key]"
                  :type="getfacilitiesdesname(key).type"
                  placeholder="请输入"
              /></el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showbc = false">取消</el-button>
          <el-button type="primary" @click="savedata">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog v-model="showpic" title="施工图纸编辑" draggable>
      <div>
        <el-row>
          <el-col :span="24">
            <ImageUpload v-model="facilite.ext1.pics" :limit="20"></ImageUpload>
          </el-col>
        </el-row>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showpic = false">取消</el-button>
          <el-button type="primary" @click="savedata">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import router from "../../../../router";
import { defineComponent, ref, onMounted, watch } from "vue";
import { getfacilitiesdesname } from "@/utils/ruoyi";
import { useRoute } from "vue-router";
import { useDict } from "@/utils/dict";
import { cloneDeep } from "lodash";
import ImagePreview from "@/components/ImagePreview";
import ImageUpload from "@/components/ImageUpload";
import { listDept, getDept } from "@/api/system/dept";
import { treeselect as deptTreeselect } from "@/api/system/dept";
import {
  listFacilities,
  listFacilities1,
  getFacilities,
  delFacilities,
  addFacilities,
  updateFacilities,
} from "@/api/system/facilities";

const {
  task_status,
  task_type,
  task_event_type,
  task_event_category,
  sys_area,
  facilities_pstz,
} = useDict(
  "task_status",
  "task_type",
  "task_event_type",
  "task_event_category",
  "sys_area",
  "facilities_pstz"
);
const { proxy } = getCurrentInstance();
const route = useRoute();
const alldept = ref([]);
const treedept = ref([]);
const showbc = ref(false);
const showpic = ref(false);
const facilite = ref({ ext1: {} });
const loading = ref(true);

const getvaluebykey = (key) => {
  var val = facilite.value.ext1[key] ?? "";
  switch (key) {
    case "tz_area_new": {
      val = (sys_area.value ?? []).filter((i) => i.value === val + "")[0]?.label ?? "-";
      break;
    }
    case "tz_ss_pstz": {
      val =
        (facilities_pstz.value ?? []).filter((i) => i.value === val + "")[0]?.label ??
        "-";
      break;
    }
    case "tz_ss_unit": {
      val = (val == "" ? [] : val ?? [])
        .map((i) => {
          return (
            alldept.value.find((p) => {
              return p.deptId + "" === i + "";
            })?.deptName ?? "-"
          );
        })
        .join("、");
      break;
    }
    default: {
    }
  }
  if (val == "") {
    val = " - ";
  }

  return getfacilitiesdesname(key).des + ":" + val;
};

const savedata = () => {
 loading.value = true;
  var ddf = cloneDeep(facilite.value);
  ddf.ext1 = JSON.stringify(ddf.ext1);
  updateFacilities(ddf).then((response) => {
    proxy.$modal.msgSuccess("修改成功");
    showbc.value = false;
    showpic.value = false;
    getfacilitieinfo();
  });
};

const getfacilitieinfo = () => {
  getFacilities(route.params.id).then((response) => {
    facilite.value = response.data;
    loading.value = false;
    facilite.value.ext1 = JSON.parse(facilite.value.ext1);
  });
}

{
  if (!route.params.id || route.params.id == "undefined") {
    router.back();
  }
  listDept().then((response) => {
    alldept.value = cloneDeep(response.data);
  });
  function setdatakey(dept) {
    if (dept.children) {
      dept.children = dept.children.map((i) => {
        return setdatakey(i);
      });
    }
    dept["value"] = dept.id;
    return dept;
  }
  deptTreeselect().then((res) => {
    treedept.value = [setdatakey(res.data[0])];
  });

  getfacilitieinfo();
}
</script>

<style lang="scss">
.demo-tabs {
  width: 100%;
}
.el-select {
  width: 100% !important;
}
.taskdetail {
  background: #fff;
  padding: 30px 22px;
  border-radius: 8px;
  overflow-y: auto;
  padding-top: 20px;
  position: relative;

  // .el-select {
  //   width: 100%;
  // }

  .title {
    color: #2b3551;
    font-size: 16px;
    font-weight: 400;
    .btngroup {
      position: absolute;
      top: 13px;
      right: 20px;
      .el-button {
        margin-left: 25px;
      }
    }
  }
  .card {
    border: 1px solid #e5e9f2;
    border-radius: 8px;
    margin-top: 16px;
    overflow: hidden;
    .title {
      background: rgba(192, 204, 218, 0.2);
      height: 54px;
      line-height: 54px;
      color: #324057;
      font-size: 14px;
      font-weight: Bold;
      padding-left: 22px;
    }
    .body {
      padding: 20px;
      color: #475669;
      font-size: 14px;
      // padding-top: 10px;
      .el-col {
        margin-bottom: 20px;
      }
      .titleheader {
        color: #2c7de3;
        font-weight: Bold;
        margin-bottom: 24px;
        margin-top: 20px;
      }
    }
  }
}
</style>
