<template>
  <el-row class="page-container dict">
    <el-container class="page-main" :gutter="20" v-show="!isDetail">
      <el-aside width="300px" class="left-content">
        <el-col :span="24" class="left-title">
          <span>专病库</span>
        </el-col>
        <el-col :span="24" class="left-search">
          <el-input
            v-model.trim="searchVal"
            clearable
            :placeholder="placeholder"
          >
          </el-input>
        </el-col>
        <el-col class="dict-list" ref="dict">
          <el-col
            v-for="(item, index) in dictData"
            :key="item.id"
            class="dict-item"
          >
            <span
              @click="handClick(index, item)"
              :class="{ active: index == isActive }"
              style="cursor: pointer"
            >
              {{ item.label }}
            </span>
          </el-col>
        </el-col>
      </el-aside>
      <el-main>
        <div class="hospital" v-loading="listLoading">
          <el-card
            shadow="hover"
            v-for="group in groupList"
            :key="group.id"
            @click.native="handleDetail(group)"
          >
            <div class="hospital_item">
              <div class="icon">
                <img src="@/assets/hos_images/center.png" alt="" />
              </div>
              <p>{{ group.groupName }}</p>
            </div>
          </el-card>
          <el-card shadow="hover" @click.native="handleAdd()">
            <div class="hospital_item">
              <div class="icon">
                <i class="el-icon-circle-plus"></i>
              </div>
              <p>添加大协作组</p>
            </div>
          </el-card>
        </div>
      </el-main>
    </el-container>
    <sdd-diagram
      v-if="isDetail"
      :disease-code="typeCode"
      ref="sdd_diagram"
      :group="group"
      @back="back"
      @editGroup="handleAdd"
      @delete="handleDel"
    ></sdd-diagram>

    <dialog-form
      ref="dialog"
      :width="'450px'"
      :title="title"
      :form-data="formData"
      :form-edit="formEdit"
      @handleConfirm="handleConfirm"
    />
  </el-row>
</template>

<script>
import SddDiagram from "./SddDiagram"

import { getBigGroupList, addCoopGroup } from "@/api/coop-group"
import { getOrgList } from "@/api/org"

export default {
  name: "SddManage",
  components: { SddDiagram },
  data() {
    const orgList = []
    getOrgList().then((res) => {
      if (res.code === 1) {
        const d = res.data || []
        d.forEach((item) => {
          orgList.push({
            label: item.orgName,
            value: item.id,
            ...item,
          })
        })
      }
    })

    return {
      isDetail: false,
      title: "",
      isActive: -1,
      searchVal: "",
      placeholder: "请输入关键字",
      listLoading: false,
      name: "",
      typeCode: "",
      typeId: "",
      formEdit: {},
      orgList,
      formData: [
        {
          type: "input",
          label: "名称",
          prop: "groupName",
          rules: [{ required: true, message: "名称必填" }],
        },
        {
          type: "input",
          label: "代码",
          rules: [{ required: true, message: "分类必填" }],
          prop: "groupCode",
        },
        {
          type: "select",
          label: "机构",
          rules: [{ required: true, message: "机构必填" }],
          prop: "orgId",
          opts: orgList,
          func: this.orgChange,
        },
        {
          type: "select",
          label: "机构类型",
          rules: [{ required: true, message: "机构类型必填" }],
          prop: "centreType",
          opts: [
            {
              label: "牵头单位",
              value: "牵头单位",
            },
            {
              label: "共同承担单位",
              value: "共同承担单位",
            },
          ],
        },
        {
          type: "input",
          label: "授权类型",
          prop: "grantType",
          disabled: true,
        },
        {
          type: "input",
          label: "接口id",
          prop: "clientId",
          disabled: true,
        },
        {
          type: "input",
          label: "接口密钥",
          prop: "clientSecret",
          disabled: true,
        },
        {
          type: "input",
          label: "加密密钥",
          prop: "sm4Secret",
          disabled: true,
        },
        {
          type: "input",
          label: "作用域",
          prop: "scope",
          disabled: true,
        },
        {
          type: "input",
          label: "中心端账号",
          prop: "username",
        },
        {
          type: "input",
          label: "中心端密码",
          prop: "password",
        },
      ],
      cacheForm: {},
      groupList: [],
      group: {},
    }
  },
  computed: {
    dictList() {
      return this.dictMap["disease_code"] || []
    },
    dictData() {
      const list = this.dictList.filter(
        (_) => !this.searchVal || _.label.includes(this.searchVal)
      )
      this.isActive = this.getListIdx(list, this.typeId)
      return list
    },
  },
  methods: {
    back() {
      this.isDetail = false
    },

    orgChange(orgId) {
      const item = this.orgList.find((_) => _.value === orgId) || {}
      const { grantType, clientId, clientSecret, sm4Secret, scope } = item
      this.$refs.dialog.initFields({
        grantType,
        clientId,
        clientSecret,
        sm4Secret,
        scope,
      })
    },

    // 点击左侧列表
    handClick(index, { label, id, value }) {
      this.name = label
      this.isActive = index
      this.typeId = id
      this.typeCode = value
      this.handleSearch()
    },

    // 查询 获得字典列表详情-列表
    async handleSearch() {
      this.listLoading = true
      getBigGroupList({ diseaseCode: this.typeCode })
        .then((res) => {
          this.groupList = res.data
        })
        .finally(() => {
          this.listLoading = false
        })
    },

    // 新增
    handleAdd(row = {}, isLevel3) {
      if (!this.typeCode) {
        this.$message.warning("请选择专病")
        return
      }
      this.title = row.id ? "编辑" : "新增"
      this.formData.forEach((item, index) => {
        if (index > 1) {
          this.$set(item, "hidden", !isLevel3)
        }
      })
      this.formEdit = Object.assign({}, row)
      this.$refs.dialog.open()
    },
    handleDel() {
      this.group = {}
      this.handleSearch()
    },
    handleDetail(group) {
      this.isDetail = true
      this.group = group
    },
    // 保存
    handleConfirm(d) {
      const form = Object.assign({ level: "1", diseaseCode: this.typeCode }, d)
      form.diseaseName = this.$handle.formatDicList(
        this.dictList,
        this.typeCode
      )
      addCoopGroup(form)
        .then((res) => {
          if (res.code === 1) {
            this.$message.success("保存成功")
            this.$refs.dialog.close()
            if (form.id) {
              // 编辑大协作组静态处理
              const idx = this.groupList.findIndex((_) => _.id === form.id)
              if (idx > -1) {
                this.groupList.splice(idx, 1, res.data)
                this.group = res.data
              }
            }
            if (this.$refs.sdd_diagram) {
              this.$refs.sdd_diagram.update()
            } else {
              this.handleSearch()
            }
          }
        })
        .catch(() => {
          this.$refs.dialog.loading = false
        })
    },

    getListIdx(list, id) {
      let listIdx = -1
      for (var i = 0; i < list.length; i++) {
        if (list[i].id === id) {
          listIdx = i
          break
        }
      }
      return listIdx
    },
  },
  mounted() {},
}
</script>

<style lang="scss" scoped>
.el-main {
  padding: 0 20px;
}
.hospital {
  display: flex;
  flex-wrap: wrap;
  .el-card {
    margin-right: 18px;
  }
  &_item {
    width: 210px;
    height: 280px;
    text-align: center;
    font-size: 20px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    .icon {
      flex: 1;
      margin-top: 50px;
      img {
        width: 120px;
      }
      i {
        font-size: 90px;
        color: #1e9fff;
      }
    }
    p {
      height: 80px;
      letter-spacing: 2px;
    }
  }
}
.page-main {
  align-items: flex-start;
}
</style>