<template>
    <div class="app-container">
      <el-row :gutter="20">
        <!--飞行员数据-->
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <!--工具栏-->
          <div class="head-container">
            <div>
              <!-- 搜索 -->
              <el-input
                v-model="query.name"
                clearable
                size="small"
                placeholder="输入飞行员名称"
                style="width: 200px;"
                class="filter-item"
                @keyup.enter.native="crud.toQuery"
              />
              <rrOperation />
              <el-button
                v-permission="permission.add"
                class="filter-item"
                size="mini"
                type="primary"
                icon="el-icon-plus"
                @click="crud.toAdd"
              >
                新增飞行员
              </el-button>
            </div>
          </div>
          <!--表单渲染-->
          <el-dialog append-to-body :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title"
            @close="uploadDisabled = false;">
            <el-form ref="form" v-loading="loading" :model="form" :rules="rules" size="small" label-width="80px">
              <el-row :gutter="10">
                <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6" class="mb20">
                  <el-form-item label="姓名" prop="name">
                    <el-input v-model="form.name" placeholder="请输入姓名" @keydown.native="keydown($event)" />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6" class="mb20">
                  <el-form-item label="账户" prop="username">
                    <el-input v-model="form.username" placeholder="请输入账户" />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6" class="mb20">
                  <el-form-item label="手机号" prop="phone">
                    <el-input v-model.number="form.phone" type="tel" placeholder="请输入手机号" />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6" class="mb20">
                  <el-form-item label="区域" prop="areaId">
                    <el-select v-model="form.areaId" placeholder="请选择区域" @change="changeArea">
                      <el-option v-for="item in areas" :key="item.name" :label="item.name" :value="item.id"/>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6" class="mb20">
                  <el-form-item label="景区" prop="scenicId">
                    <el-select v-model="form.scenicId" placeholder="请选择景区">
                      <el-option v-for="item in scenics" :key="item.name"
                      :label="item.name" :value="Number(item.id)"/>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6" class="mb20">
                  <el-form-item label="飞行资质" prop="qualification">
                    <el-select v-model="form.qualification" placeholder="请选择飞行资质" clearable>
                      <el-option v-for="item in dict.user_qualification" :key="item.id" :label="item.label" :value="item.value"/>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6" class="mb20">
                  <el-form-item label="飞行资质附件" prop="files" label-width="120px">
                    <el-upload
                      ref="uploadRef"
                      action="#"
                      list-type="picture-card"
                      :class="{ disabled: uploadDisabled }"
                      :limit="1"
                      :file-list="form.files"
                      :on-change="handleChange"
                      :auto-upload="false"
                    >
                      <div style="display: flex;flex-direction: column;align-items: center;justify-content: center;margin-top: -20px;">
                        <i class="el-icon-plus" style="font-size: 30px;" />
                        <span style="margin: 5px 0 -20px;line-height: 20px">上传</span>
                      </div>
                      <template #file="{ file }">
                        <div>
                          <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                          <span class="el-upload-list__item-actions">
                            <span
                              class="el-upload-list__item-preview"
                              @click="handlePictureCardPreview(file)"
                            >
                              <i class="el-icon-zoom-in" />
                            </span>
                            <span
                              class="el-upload-list__item-delete"
                              @click="handleRemove(file)"
                            >
                              <i class="el-icon-delete" />
                            </span>
                          </span>
                        </div>
                      </template>
                    </el-upload>
                    <el-dialog append-to-body :visible.sync="dialogVisible" top="20vh">
                      <div>
                        <img :src="dialogImageUrl" style="width: 100%" alt="Preview Image">
                      </div>
                    </el-dialog>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer" style="margin-top: -30px;">
              <el-button type="text" @click="crud.cancelCU">取消</el-button>
              <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
            </div>
          </el-dialog>
          <!--表格渲染-->
          <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
            <el-table-column :show-overflow-tooltip="true" prop="name" label="姓名" align="center"/>
            <el-table-column :show-overflow-tooltip="true" prop="username" label="账户" align="center"/>
            <el-table-column :show-overflow-tooltip="true" prop="phone" width="100" label="手机号" align="center"/>
            <el-table-column :show-overflow-tooltip="true" prop="areaName" label="区域" :formatter="commonFormatter" align="center"/>
            <el-table-column :show-overflow-tooltip="true" prop="scenicName" label="景区" :formatter="commonFormatter" align="center"/>
            <el-table-column :show-overflow-tooltip="true" prop="createTime" width="135" label="创建日期" align="center"/>
            <el-table-column
              v-if="checkPer(['admin','user:edit','user:del'])"
              label="操作"
              width="115"
              align="center"
              fixed="right"
            >
              <template slot-scope="scope">
                <udOperation
                  :data="scope.row"
                  :permission="permission"
                  :disabled-dle="scope.row.id === user.id"
                />
              </template>
            </el-table-column>
          </el-table>
          <!--分页组件-->
          <pagination />
        </el-col>
      </el-row>
    </div>
  </template>

  <script>
  import crudPilot from '@/api/system/pilot'
  import { isvalidPhone } from '@/utils/validate'
  import { allAreas } from '@/api/system/area'
  import { allScenic } from '@/api/system/scenic'
  import { getAll } from '@/api/system/role'
  import CRUD, { presenter, header, form, crud } from '@crud/crud'
  import rrOperation from '@crud/RR.operation'
  import udOperation from '@crud/UD.operation'
  import pagination from '@crud/Pagination'
  import { mapGetters } from 'vuex'
  import { upload } from '@/utils/upload'
  const defaultForm = { id: null, username: null, name: null,
    phone: null, areaId: null, scenicId: null, roles: null, qualification: null,
    qualificationAttachment: null, files: [], userType: null, enabled: 1 }
  export default {
    name: 'Pilot',
    components: { rrOperation, udOperation, pagination },
    cruds() {
      return CRUD({ title: '飞行员', url: 'api/emEmployees/findByPage', crudMethod: { ...crudPilot }, optShow: { add: true, reset: true }})
    },
    mixins: [presenter(), header(), form(defaultForm), crud()],
    // 数据字典
    dicts: ['user_qualification'],
    data() {
      // 自定义验证
      const validPhone = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入电话号码'))
        } else if (!isvalidPhone(value)) {
          callback(new Error('请输入正确的11位手机号码'))
        } else {
          callback()
        }
      }
      return {
        height: document.documentElement.clientHeight - 180 + 'px;',
        roles: [],
        defaultProps: { children: 'children', label: 'name', isLeaf: 'leaf' },
        permission: {
          add: ['admin', 'user:add'],
          edit: ['admin', 'user:edit'],
          del: ['admin', 'user:del']
        },
        areas: [],
        scenics: [],
        uploadDisabled: false,
        dialogVisible: false,
        loading: false,
        dialogImageUrl: '',
        rules: {
          username: [
            { required: true, message: '请输入账户', trigger: 'blur' },
            { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          ],
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
            { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          ],
          phone: [
            { required: true, trigger: 'blur', validator: validPhone }
          ],
          areaId: [
            { required: true, message: '区域不能为空', trigger: 'blur' }
          ],
          scenicId: [
            { required: true, message: '景区不能为空', trigger: 'blur' }
          ],
          qualification: [
            { required: true, message: '飞行资质不能为空', trigger: 'blur' }
          ],
          files: [
            { required: false, message: '请上传资质文件', trigger: 'change' }
          ],
        }
      }
    },
    computed: {
      ...mapGetters([
        'user',
        'imagesUploadApi'
      ])
    },
    created() {
      this.crud.msg.add = '新增成功'
    },
    mounted: function() {
      const that = this
      window.onresize = function temp() {
        that.height = document.documentElement.clientHeight - 180 + 'px;'
      }
    },
    methods: {
      // 禁止输入空格
      keydown(e) {
        if (e.keyCode === 32) {
          e.returnValue = false
        }
      },
      // 预览图片
      handlePictureCardPreview(file, uploadFiles) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      },
      // 删除图片
      handleRemove(file, uploadFiles) {
        this.$refs['uploadRef'].clearFiles()
        this.form.qualificationAttachment = ''
        this.form.files = [];
        this.uploadDisabled = false
      },
      commonFormatter(row, column){
        return row[column.property] || '暂无';
      },
      // 触发图片上传
      handleChange(file, uploadFiles) {
        if (file.raw.type === 'image/png' || file.raw.type === 'image/jpeg' || file.raw.type === 'image/jpg' || file.raw.type === 'image/gif') {
          this.loading = true
          this.form.files = uploadFiles
          this.uploadDisabled = true
          try {
            upload(this.imagesUploadApi, file.raw).then(res => {
              if(res.status === 200){
                  const data = res.data;
                  const url = data.fileFullPath;
                  this.form.qualificationAttachment = url;
                  this.loading = false;
              }else{
                  this.$message.error(`图片上传失败！`);
                  this.loading = false;
                  return;
              }
            })
          } catch (error) {
            this.loading = false
            this.$message.error('图片上传失败！')
          }
        } else {
          this.$confirm('图片的格式不正确，请重新选择！', '提示', {
            confirmButtonText: '确定',
            type: 'warning'
          })
          uploadFiles.pop()
          this.uploadDisabled = false
        }
      },
      // 选择区域
      changeArea(value){
        this.form.scenicId = '';
        allScenic({areaId: value}).then(res=>{
          this.scenics = res || [];
        })
      },
      // 新增与编辑前做的操作
      [CRUD.HOOK.afterToCU](crud, form) {
        this.getRoles()
        this.getAreas()
        if(form.scenicId&&form.areaId){
          allScenic({areaId: form.areaId}).then(res=>{
            this.scenics = res || [];
          })
        }
      },
      // 新增前将多选的值设置为空
      [CRUD.HOOK.beforeToAdd]() {
        this.roleDatas = []
      },
      // 初始化编辑时候的角色与岗位
      [CRUD.HOOK.beforeToEdit](crud, form) {
        this.roleDatas = []
        if(form.scenicId) form.scenicId = Number(form.scenicId);
        if(form.qualificationAttachment){
          this.form.files = [{url: form.qualificationAttachment,}]
          this.uploadDisabled = true;
        }
      },
      // 提交前做的操作
      [CRUD.HOOK.afterValidateCU](crud) {
        // const rolesIds = this.roles.find(item=>item.name === '飞行员').id;
        crud.form.userType = 1;
        // crud.form.roles = [{id:rolesIds}];
        return true;
      },
      // 获取全部区域
      getAreas(){
        allAreas().then(res => {
          this.areas = res;
        })
      },
      // 获取弹窗内角色数据
      getRoles() {
        getAll().then(res => {
          this.roles = res
        }).catch(() => { })
      },
    }
  }
  </script>

  <style rel="stylesheet/scss" lang="scss" scoped>
    ::v-deep .el-upload--picture-card,::v-deep .el-upload-list__item{
      width: 110px !important;
      height: 110px !important;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    ::v-deep .disabled{
      .el-upload--picture-card{
        display: none;
      }
    }
  </style>
