<template>
  <div id="medicalunion-management">
    <div class="top-btn">
      <el-select v-model="selectType">
        <el-option
          v-for="item in selectList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button type="primary" class="btn" @click="addMedical">添加</el-button>
    </div>
    <div class="bot-table">
      <customs-table
        ref="table"
        :table-data="tableData"
        :columns="columns"
        :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"
      @closed="resetForm"
    >
      <div class="title">{{ readOnly ? "查看" : "添加" }}</div>
      <el-form
        ref="form"
        :model="form"
        :label-position="'right'"
        label-width="110px"
        label-suffix=":"
        :rules="rules"
      >
        <el-form-item
          v-for="(item, index) in formList"
          :key="index"
          :label="item.label"
          :prop="item.prop"
        >
          <template v-if="!readOnly">
            <!-- 输入框 -->
            <el-input
              v-if="item.type == 'input'"
              v-model="form[item.prop]"
              autocomplete="off"
              :placeholder="'请填写' + item.label"
            ></el-input>
            <!-- 下拉选 -->
            <el-select
              v-else-if="item.type == 'select'"
              v-model="form[item.prop]"
              :placeholder="'请选择' + item.label"
            >
              <el-option
                v-for="e in item.selectGroup"
                :key="e.value"
                :label="e.label"
                :value="e.value"
              ></el-option>
            </el-select>
            <!-- 上传 -->
            <el-upload-self
              v-else-if="item.type === 'upload'"
              v-model="form[item.prop]"
              :btn-type="'text'"
              v-bind="item"
            ></el-upload-self>
            <!-- switch -->
            <!-- switch切换  启用 -->
            <el-switch
              v-else-if="item.type === 'switch'"
              v-model="form[item.prop]"
            >
            </el-switch>
          </template>
          <template v-else>
            <span>{{ form[item.prop] || "--" }}</span>
          </template>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import CustomsTable from "@/components/CustomsTable"
import paginationMixin from "@/components/TabComponents/mixin"
import ElUploadSelf from "@/components/Upload"

export default {
  components: {
    CustomsTable,
    ElUploadSelf,
  },
  mixins: [paginationMixin],
  data() {
    return {
      readOnly: true,
      addVisible: false,
      selectList: [
        {
          label: "筛查",
          value: 0,
        },
        {
          label: "生活",
          value: 1,
        },
        {
          label: "医学知识",
          value: 2,
        },
        {
          label: "其他",
          value: 3,
        },
      ],
      selectType: 0,
      listLoading: false,
      columns: [
        {
          label: "标题",
          minWidth: 120,
          value: "title",
        },
        {
          label: "图片",
          minWidth: 120,
          value: "iamge",
        },
        {
          label: "文件",
          minWidth: 120,
          value: "file",
        },
        {
          label: "上传时间",
          minWidth: 120,
          value: "uploadTime",
        },
        {
          label: "最新修改时间",
          minWidth: 120,
          value: "editTime",
        },
        {
          label: "上传人姓名",
          minWidth: 120,
          value: "uploadPerson",
        },
        {
          label: "启用状态",
          minWidth: 120,
          type: "switch",
          value: "isOpen",
          func: this.openChage,
        },
        {
          label: "操作",
          width: 220,
          fixed: "right",
          operType: "button",
          operations: [
            {
              func: this.viewMedical,
              formatter(row) {
                return {
                  label: "查看",
                  type: "text",
                }
              },
            },
            {
              func: this.editMedical,
              formatter(row) {
                return {
                  label: "编辑",
                  type: "text",
                }
              },
            },
            {
              func: this.rowOpration,
              style: {
                color: "#FA6400",
              },
              formatter(row) {
                return {
                  label: "删除",
                  type: "text",
                }
              },
            },
          ],
        },
      ],

      tableData: [
        {
          title: "第一个",
          isOpen: true,
        },
      ],
      formList: [
        {
          type: "select",
          label: "类型",
          prop: "type",
          selectGroup: [
            {
              label: "筛查",
              value: 0,
            },
            {
              label: "生活",
              value: 1,
            },
            {
              label: "医学知识",
              value: 2,
            },
            {
              label: "其他",
              value: 3,
            },
          ],
        },
        {
          type: "input",
          label: "标题",
          prop: "title",
        },
        {
          type: "upload",
          label: "图片",
          prop: "img",
        },
        {
          type: "upload",
          label: "PDF",
          prop: "aaa",
        },
        {
          type: "switch",
          label: "启用状态",
          prop: "ssd",
        },
      ],
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
      },
      form: {},
    }
  },
  watch: {},
  mounted() {},
  methods: {
    // 添加医联体
    addMedical() {
      this.addVisible = true
    },
    // 查看
    viewMedical() {
      this.readOnly = true
      this.form = {
        title: "123",
      }
      this.addVisible = true
    },
    // 编辑医联体
    editMedical(data) {
      this.readOnly = false
      console.log(data)
      this.form = {
        medicalName: "黑乎乎",
        medicalId: "123",
        province: "001",
        city: "001",
      }
      this.addVisible = true
    },
    // 启用状态
    openChage(data, index) {
      console.log(data, index)
    },
    resetForm() {
      this.$refs["form"].resetFields()
    },
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          alert("submit!")
          this.addVisible = false
        } else {
          console.log("error submit!!")
          return false
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
#medicalunion-management {
  padding: 20px 0;
  .top-btn {
    .btn {
      width: 80px;
      height: 32px;
      background: #4e68ff;
      border-radius: 4px;
      margin-left: 20px;
    }
  }
  .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;
  .el-button {
    width: 100px;
    height: 32px;
    background: #4e68ff;
  }
}
::v-deep .el-upload {
  .el-button {
    transform: translateY(-4px);
  }
}
</style>
