<template>
  <el-dialog :title="dialogTitle" :visible.sync="visible" width="800px" class="import-modal-wrap" append-to-body>
    <el-form
      :model="searchArray"
      ref="searchArrayRef"
      size="small"
      :inline="true"
      :rules="rules"
      label-width="110px"
      style="margin-top:20px;"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="关联人姓名" prop="relateName">
            <el-input
              v-model="searchArray.relateName"
              placeholder="请输入"
              clearable
              style="width:630px"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="联系方式" prop="phoneNum">
            <el-input
              v-model="searchArray.phoneNum"
              placeholder="请输入"
              clearable
              style="width:630px"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="职务" prop="position">
            <el-input
              v-model="searchArray.position"
              placeholder="请输入"
              clearable
              style="width:630px"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="乡镇（街道）" prop="town">
            <el-input
              v-model="searchArray.town"
              placeholder="请输入"
              clearable
              style="width:630px"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="行政村名称" prop="village">
            <el-input
              v-model="searchArray.village"
              placeholder="请输入"
              clearable
              style="width:630px"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="网点名称" prop="outlet">
            <el-input
              v-model="searchArray.outlet"
              placeholder="请输入"
              clearable
              style="width:630px"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="网格负责人" prop="gridCharger">
            <el-input
              v-model="searchArray.gridCharger"
              placeholder="请输入"
              clearable
              style="width:630px"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="网格管理员" prop="gridManager">
            <el-input
              v-model="searchArray.gridManager"
              placeholder="请输入"
              clearable
              style="width:630px"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="onClose">取 消</el-button>
      <el-button 
        type="primary" 
        :loading="btnLoading"
        @click="submitUpload" 
      >
        确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { teamadd, teamedit } from "@/api/grid/createdjs.js";
import { downloadFiles } from '@/utils'
import { isEmpty, cloneDeep } from 'lodash'
import dayjs from 'dayjs'

export default {
  components: {
  },
  props: {
    dialogTitle: {
      required: true,
      type: String,
      default: '新增'
    },
    perInfo: {
      required: true,
      type: Object,
      default: {}
    }
  },
  computed: {
  },
  watch: {
    perInfo: {
      handler(val) {
        this.searchArray = cloneDeep(val)
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      searchArray: {
        relateName: "",
        phoneNum: "",
        position: "",
        village: "",
        town: "",
        outlet: "",
        gridCharger: "",
        gridManager: "",
        roleType: ""
      },
      rules: {
        relateName: [
          {
            required: false,
            message: '请输入关联人姓名',
            trigger: 'blur'
          }
        ],
        phoneNum: [
          {
            required: false,
            message: '请输入联系方式',
            trigger: 'blur'
          }
        ],
        position: [
          {
            required: false,
            message: '请输入职务',
            trigger: 'blur'
          }
        ],
        town: [
          {
            required: false,
            message: '请输入乡镇（街道）',
            trigger: 'blur'
          }
        ],
        village: [
          {
            required: false,
            message: '请输入行政村名称',
            trigger: 'blur'
          }
        ],
        outlet: [
          {
            required: false,
            message: '请输入网点名称',
            trigger: 'blur'
          }
        ],
        gridCharger: [
          {
            required: false,
            message: '请输入网格负责人',
            trigger: 'blur'
          }
        ],
        gridManager: [
          {
            required: false,
            message: '请输入网格管理员',
            trigger: 'blur'
          }
        ]
      },
      isDelete: false,
      visible: false,
      btnLoading: false,
      fileList: [],
      fileDataArr: [],
      file: '',
      timer: ''
    }
  },
  methods: {
    onClose() {
      this.visible = false
    },
    submitUpload() {
      this.$refs.searchArrayRef.validate(valid => {
        if (valid) {
          const isEdit = this.dialogTitle.includes('编辑')
          this.btnLoading = true
          const API = isEdit ? teamedit : teamadd
          const params = isEdit ?
          {
            id: this.perInfo.id
          } : 
          {
            gridId: this.perInfo.gridId
          }
          API({
            ...params,
            ...this.searchArray
          })
            .then((res) => {
              if (res.code === 200) {
                this.$message.success(res.msg || '操作成功')
                this.$emit('onRefreshTable')
                this.onClose()
              }
            })
            .catch((err) => console.error(err))
            .finally(() => {
              this.btnLoading = false
            })
        }
      })
    },
    onOpen() {
      this.visible = true
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-form--inline .el-form-item {
  display: flex;
}
.import-upload {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  ::v-deep .el-upload {
    width: 630px;
    .el-upload-dragger {
      background-color: #f7f8fa;
      border: 1px dashed #cccccc;
      width: 100%;
      height: 200px;
      border-radius: 2px;
    }
    .el-icon-upload {
      margin: 40px 0 13px;
    }
    .upload-btn {
      margin: 24px 0 16px 0;
    }
    .el-upload__text {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
}
.common-header-title {
  margin-bottom: 24px;
}
.select-cnt {
  width: 700px;
  margin: 20px auto 50px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  > span {
    display: inline-block;
    width: 56px;
  }
  .el-select {
    flex: 1;
  }
}
.el-upload__tip {
  margin-top: 20px;
}
.list-header {
  clear: both;
  > p {
    font-size: 0;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    > span {
      font-size: 14px;
      color: #212121;
      display: inline-block;
      letter-spacing: normal;
      word-spacing: normal;
      width: 10%;
      margin-right: 12px;
    }
  }
  ul {
    max-height: 50vh;
    margin: 0;
    list-style: none;
    padding: 0;
    .form-vl {
      display: flex;
      align-items: center;
      ::v-deep .el-form-item {
        margin-right: 12px;
        margin-bottom: 0;
        width: 10%;
        .el-form-item__content {
          display: flex;
          span {
            display: inline-block;
            max-width: 100px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        &.is-error .el-form-item__content {
          width: 62%;
        }
      }
    }
    .el-icon-remove-outline,
    .el-icon-circle-plus-outline {
      font-size: 24px;
      cursor: pointer;
    }
    .disabeld-icon {
      color: #dcdfe6;
      cursor: not-allowed;
      pointer-events: none;
    }
  }
}
.file-name {
  color: #666666;
  font-size: 12px;
  font-weight: 400;
  margin-top: 2px;
  cursor: default;
  .el-icon-close {
    margin-left: 50px;
    visibility: hidden;
    cursor: pointer;
  }
  &.is-show-del {
    .el-icon-close {
      visibility: visible;
    }
  }
}
.upload-cloud {
  width: 50px;
  height: 50px;
  margin: 4px 0 10px 0;
}
</style>

<style lang="scss">
.import-modal-wrap {
  .el-dialog__body {
    max-height: 70vh;
    overflow-y: auto;
  }
}
</style>