<template>
  <div id="medicalunion-management">
    <div class="top-btn">
      <el-button type="primary" class="btn" @click="addMedical">添加</el-button>
    </div>
    <div class="bot-table">
      <customs-table
        ref="table"
        :table-data="tableData"
        :columns="columns"
        :show-index="true"
        :header-class="'newHeader'"
        :list-loading="listLoading"
        :current-page="pageIndex"
        :total-count="total"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        @pageSizeChange="handleSizeChange"
        @currentPageChange="handleCurrentChange"
      />
    </div>
    <el-dialog :visible.sync="addVisible" width="520px" :show-close="true">
      <div class="title">添加医联体</div>
      <el-form
        ref="form"
        :model="form"
        :label-position="'right'"
        label-width="110px"
        label-suffix=":"
      >
        <el-form-item
          v-for="(item, index) in formList"
          :key="index"
          :label="item.label"
          :rules="[{ required: true, message: item.label + '不能为空' }]"
          :prop="item.prop"
        >
          <el-input
            v-if="item.type == 'input'"
            v-model="form[item.prop]"
            autocomplete="off"
            :placeholder="'请填写' + item.label"
          ></el-input>
          <el-select
            v-if="item.type == 'select'"
            v-model="form[item.prop]"
            :placeholder="'请选择' + item.label"
            @change="changeCity(item.prop)"
          >
            <el-option
              v-for="e in item.selectGroup"
              :key="e.value"
              :label="e.label"
              :value="e.label"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button class="f-btn" type="primary" @click="submit()"
          >保存</el-button
        >
      </span>
    </el-dialog>
    <!-- 删除提示框 -->
    <el-dialog title="提示" :visible.sync="deleteVisible" width="30%">
      <span>确定删除吗？</span>
      <span slot="footer" class="dialog-footers">
        <el-button @click="deleteVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmDelete">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import CustomsTable from "@/components/CustomsTable"
import paginationMixin from "@/components/TabComponents/mixin"
import {
  addMedicalunion,
  medicalunionList,
  deleteUnion,
} from "@/api/medicalunion-management"
import cityList from "@/data/city"

export default {
  components: {
    CustomsTable,
  },
  mixins: [paginationMixin],
  data() {
    return {
      deleteVisible: false,
      addVisible: false,
      listLoading: false,
      columns: [
        {
          label: "医联体名称",
          minWidth: 120,
          value: "unionName",
        },
        {
          label: "医联体编号",
          minWidth: 120,
          value: "unionNo",
        },
        {
          label: "省",
          minWidth: 120,
          value: "province",
        },

        {
          label: "市",
          minWidth: 120,
          value: "city",
        },
        {
          label: "操作",
          width: 220,
          fixed: "right",
          operType: "button",
          operations: [
            {
              func: this.editMedical,
              formatter(row) {
                return {
                  label: "编辑",
                  type: "text",
                }
              },
            },
            {
              func: this.deleteFunc,
              style: {
                color: "#FA6400",
              },
              formatter(row) {
                return {
                  label: "删除",
                  type: "text",
                }
              },
            },
          ],
        },
      ],
      tableData: [],
      formList: [
        {
          type: "input",
          label: "医联体名称",
          prop: "unionName",
        },
        {
          type: "input",
          label: "医联体编号",
          prop: "unionNo",
        },
        {
          type: "select",
          label: "省",
          prop: "province",
          selectGroup: cityList,
        },
        {
          type: "select",
          label: "市",
          prop: "city",
          selectGroup: [],
        },
      ],
      form: {},
      deleteId: "",
    }
  },
  watch: {},
  mounted() {
    this.getMedicalunionList()
    console.log(cityList)
  },
  methods: {
    // 获取list
    getMedicalunionList() {
      this.listLoading = true
      medicalunionList({
        size: this.pageSize,
        current: this.pageIndex,
      }).then((res) => {
        if (res.code == 1) {
          this.total = res.data.total
          this.tableData = res.data.records
          this.listLoading = false
        }
      })
    },
    // 添加医联体
    addMedical() {
      if (this.$refs["form"]) {
        this.clearForm()
      }

      this.addVisible = true
    },
    // 编辑医联体
    editMedical(data) {
      console.log(data)
      this.form = { ...data }
      this.addVisible = true
      let value = this.form["province"]
      cityList.forEach((e) => {
        if (e.label == value) {
          this.formList[3].selectGroup = e.children
          if (e.children[0].label == "市辖区") {
            this.formList[3].selectGroup[0].label = e.label
          }
        }
      })
    },
    submit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          addMedicalunion(this.form).then((res) => {
            if (res.code == 1) {
              this.$message.success("添加成功")
              this.addVisible = false
              this.page = 1
              this.getMedicalunionList()
            }
          })
        } else {
          // console.log("error submit!!")
          return false
        }
      })
    },
    // 删除
    deleteFunc(data) {
      console.log(data)
      this.deleteVisible = true
      this.deleteId = data.id
    },
    clearForm() {
      this.form = {}
      this.$refs["form"].resetFields()
    },
    confirmDelete() {
      this.deleteVisible = false
      deleteUnion(this.deleteId)
        .then((res) => {
          if (res.code == 1) {
            this.$message.success("删除成功")
            this.getMedicalunionList()
          }
        })
        .catch(() => {})
    },
    // 省份变化改变城市
    changeCity(val) {
      console.log(val)
      if (val == "province") {
        delete this.form["city"]
        // console.log(this.form["province"])
        let value = this.form["province"]
        cityList.forEach((e) => {
          if (e.label == value) {
            this.formList[3].selectGroup = e.children
            if (e.children[0].label == "市辖区") {
              this.formList[3].selectGroup[0].label = e.label
            }
          }
        })
      }
    },
  },
}
</script>
<style lang="scss" scoped>
#medicalunion-management {
  padding: 20px;
  .top-btn {
    .btn {
      width: 80px;
      height: 32px;
      background: #4e68ff;
      border-radius: 4px;
    }
  }
  .bot-table {
    margin-top: 20px;
  }
  .title {
    text-align: center;
    height: 26px;
    font-size: 22px;
    font-family: AlibabaPuHuiTiM;
    color: rgba(0, 0, 0, 0.8);
    line-height: 26px;
    margin-bottom: 30px;
  }
}
::v-deep .el-dialog__body {
  padding: 0 40px;
  border-top: none;
}
::v-deep .el-dialog__footer {
  border-top: none;
  text-align: center;
  .f-btn {
    width: 100px;
    height: 32px;
    background: #4e68ff;
  }
}
</style>