<template>
  <Dialog
    :is-dialog-exist="isEdit"
    :title="editDialogTitle"
    :dialog-style="checkDialogStyle"
    @close-dialog="handleClose"
  >
    <el-container>
      <el-main>
        <el-form ref="formData" :model="formData" :rules="rules" label-width="auto">
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="formData.phone"></el-input>
          </el-form-item>
          <el-form-item v-if="formData.id === null" label="密码" prop="pwd">
            <el-input v-model="formData.pwd" show-password placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="权限分组" prop="roleId">
            <el-select v-model="formData.roleId" placeholder="请选择">
              <el-option v-for="(item, index) in roleData" :key="index" :label="item.roleName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="昵称" prop="name">
            <el-input v-model="formData.name"></el-input>
          </el-form-item>
          <el-form-item label="微信号" prop="wechatNum">
            <el-input v-model="formData.wechatNum"></el-input>
          </el-form-item>
          <el-form-item label="微信二维码" prop="qrcodeImgUrl">
            <div class="Content-img">
              <div class="img-div">
                <el-image v-show="formData.qrcodeImgUrl" :src="formData.qrcodeImgUrl" :preview-src-list="[formData.qrcodeImgUrl]" style="width: 113px;height: 111px"></el-image>
              </div>
              <div class="toolbar">
                <!-- 上传按钮 -->
                <el-upload ref="upload" class="upload-demo" action="" :on-change="handleImageSelected" :file-list="fileList" :auto-upload="false" :show-file-list="false">
                  <!-- 上传按钮 -->
                  <FNButton slot="trigger" size="small" type="danger" plain background style="width:30px;height:30px;padding: 0px;" @click="handleUpload('officialLogo')">
                    <template slot="icon">
                      <svg-icon icon-class="upload"></svg-icon>
                    </template>
                  </FNButton>
                  <el-tooltip class="item" effect="dark" content="选择" placement="top">
                    <!-- 选择按钮 -->
                    <FNButton size="small" type="primary" plain background style="width:30px;height:30px;padding: 0px;margin-left:8px;" @click="handleShowSelectAssets('officialLogo')">
                      <template slot="icon">
                        <svg-icon icon-class="select"></svg-icon>
                      </template>
                    </FNButton>
                  </el-tooltip>
                </el-upload>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </el-main>
      <el-footer>
        <el-button type="primary" size="mini" @click="onSubmit">确认</el-button>
        <el-button type="info" plain size="mini" @click="closeDialog">取消</el-button>
      </el-footer>
      <!-- 选择资产弹出层 -->
      <SelectAssets v-model="selAssetsVisible" @close="selAssetsVisible = false" @select="handleSelectionAssets"></SelectAssets>
    </el-container>
  </Dialog>
</template>

<script>
/**
 * 客户经理管理-编辑
 */
// 上传组件
import FNButton from '@/components/FNButton/index'
import SelectAssets from '@/components/SelectAssets/index'
import CommonSet from '@/api/setting-center/CommonSet'
import Dialog from '@/components/Dialog/index'
import { postSaveClient } from '/src/api/master-info-manage/account-manager-management'
export default {
  components: { Dialog, FNButton, SelectAssets },
  props: {
    // 每行选中的数据
    itemChoseData: {
      type: Object,
      require: true,
      default: () => {}
    },
    // 权限分组数据
    roleData: {
      type: Array,
      require: true,
      default: () => {}
    },
    editDialogTitle: {
      type: String,
      default: () => {}

    },
    isEdit: {
      type: Boolean,
      default: () => {}
    }
  },
  data() {
    return {
      // 弹窗
      checkDialogStyle: {
        '--dialog-width': '740px',
        '--dialog-height': '518px',
        '--title-height': '51px'
      },
      modType: 5,
      // 表单参数
      formData: {
        id: null,
        pwd: '',
        roleId: '',
        name: '',
        wechatNum: '',
        phone: '',
        qrcodeImg: '',
        qrcodeImgUrl: ''
      },
      rules: {
        phone: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        roleId: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        name: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      },
      // 上传参数
      selAssetsVisible: false,
      fileList: [],
      selType: '',
      selModel: 'base',
      isArr: false,
      selIndex: 0
    }
  },
  watch: {
    isEdit(val) {
      if (val) {
        if (this.itemChoseData !== null) {
          this.formData = this.itemChoseData
        } else {
          this.formData = {
            id: null,
            pwd: '',
            roleId: '',
            name: '',
            wechatNum: '',
            phone: '',
            qrcodeImg: '',
            qrcodeImgUrl: ''
          }
        }
        console.log(JSON.stringify(this.formData), '选中的数据')
        console.log(JSON.stringify(this.roleData), '权限分组数据')
      }
    }
  },
  created() {
    // this._baseRequest()
  },
  methods: {
    // 加入保存操作请求
    _postRequest() {
      console.log(this.formData.roleId)
      const params = {
        id: this.formData.id,
        pwd: this.formData.pwd,
        roleId: this.formData.roleId,
        name: this.formData.name,
        wechatNum: this.formData.wechatNum,
        phone: this.formData.phone,
        qrcodeImg: this.formData.qrcodeImg
      }
      postSaveClient(params).then(resp => {
        if (parseInt(resp.code) === 0) {
          this.$message.success('成功！')
          this.handleSuccess()
          this.handleClose()
        }
      })
    },
    handleClose() {
      this.$emit('handle-close')
    },
    handleSuccess() {
      this.$emit('handle-success')
    },
    // 关闭弹窗操作
    closeDialog() {
      this.handleClose()
    },
    // 提交操作
    onSubmit() {
      this.$refs.formData.validate(valid => {
        if (valid) {
          this._postRequest()
        }
      })
    },
    handleUpload(type, selModel = 'base', isArr = false, index = 0) {
      this.selType = type
      this.selModel = selModel
      this.isArr = isArr
      this.selIndex = index
    },
    handleShowSelectAssets(type, selModel = 'base', isArr = false, index = 0) {
      this.selType = type
      this.selModel = selModel
      this.isArr = isArr
      this.selIndex = index
      this.selAssetsVisible = true
      console.log('mudule name = ' + selModel + ', isArr = ' + this.isArr)
    },
    handleImageSelected(file, fileList) {
      console.log(file)
      const api = new CommonSet()
      api.uploadFile(file, '', '个性化').then(response => {
        console.log('上传成功', response)
        const { data } = response
        const { fileName, saveName } = data
        console.log(fileName, saveName)
        this.formData.qrcodeImg = saveName
        this.formData.qrcodeImgUrl = fileName
      }).catch(error => {
        console.error(error)
        this.$message.error(error)
      })
    },
    handleSelectionAssets(asset) {
      console.log(this.selType + ', module = ' + this.selModel + ', index = ' + this.selIndex)
      this.selAssetsVisible = false
      // 不是数组
      this.formData.qrcodeImg = asset[0].saveName
      this.formData.qrcodeImgUrl = asset[0].imageUrl
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-container{
    width: 100%;
    height: 100%;
    /*background: red;*/
    .el-main{
      width: 100%;
      height: 90%;
      padding: 3% 15% 0 15%;
      .Content-img{
        display: flex;
        .toolbar{
          margin-top: 90px;
        }
        .img-div{
          width: 122px;
          height: 122px;
          border: 1px dashed #DDDDDD ;
          padding: 0.9%;
          margin-right: 2%;
        }
      }
    }
    .el-footer{
      width: 100%;
      height: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding-bottom: 30px;
    }
  }
</style>
