<template>
  <div>
    <a-modal
      class="modalBox"
      :title="titleText"
      v-model="isshow"
      @cancle="cancel"
      width="60%"
      :centered="true">
      <a-form :form="form" @submit="handleSubmit">
        <a-row :gutter="24">
          <a-col :span="12">
            <!-- 用户名称 -->
            <a-form-item label="用户名称" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
              <a-input
                placeholder="请输入用户名称(最多30个字符)"
                allowClear
                id="userModal-name"
                :maxLength="30"
                v-decorator="['formData.name', {
                  initialValue: formData.name,getValueFromEvent: $filterEmpty,
                  rules: [{ required: true, message: '请输入用户名称(最多30个字符)!' },{pattern:'^[^<|>]{1,30}$',message:'请输入不含<或>的字符，最多30个字符'}] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <!-- 手机号码 -->
            <a-form-item label="手机号码" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
              <a-input
                placeholder="请输入手机号码"
                allowClear
                :maxLength="11"
                id="userModal-phone"
                v-decorator="['formData.phone', {
                  initialValue: formData.phone,getValueFromEvent: $filterEmpty,
                  rules: [{ required: true, message: '请输入手机号码!' },{pattern:/^[1][0-9]{10}$/, message: '请输入正确的手机号码!'}] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <!-- 性别 -->
          <a-col :span="12">
            <a-form-item label="性别" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
              <v-select
                code="SEX"
                id="userModal-sex"
                v-decorator="[
                  'formData.sex',
                  {
                    initialValue: formData.sex,
                    rules: [{ required: true, message: '请选择性别!' }] },
                ]"
                allowClear ></v-select>

            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="所属合作商" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
              <a-select
                placeholder="请选择"
                allowClear
                v-decorator="[
                  'formData.orgCode',
                  {
                    initialValue: formData.orgCode,
                    rules: [{ required: true, message: '请选择!' }] },
                ]"
                :showSearch="true"
                option-filter-prop="children"
                :filter-option="filterOption"
                @focus="handleFocus"
                @blur="handleBlur"
                @change="handleChange">
                <a-select-option v-for="item in optionData" :key="item.orgCode" :value="item.orgCode" :disabled="item.state == '0' ? true : false">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <!-- 状态 -->
          <a-col :span="12">
            <a-form-item label="状态" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
              <a-radio-group
                name="radioGroup"
                id="userModal-loginFlag"
                v-decorator="[
                  'formData.loginFlag',
                  {
                    initialValue: formData.loginFlag,
                    rules: [{ required: true, message: '请选择状态!' }] },
                ]"
              >
                <a-radio :value="1">启用</a-radio>
                <a-radio :value="0">禁用</a-radio>
              </a-radio-group>

            </a-form-item>
          </a-col>
          <!-- 状态 -->
          <!-- <a-col :span="12">
            <a-form-item label="是否为超级管理员" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
              <a-radio-group
                name="radioGroup"
                id="userModal-loginFlag"
                v-decorator="[
                  'formData.loginFlag',
                  {
                    initialValue: formData.loginFlag,
                    rules: [{ required: true, message: '请选择!' }] },
                ]"
              >
                <a-radio :value="1">是</a-radio>
                <a-radio :value="0">否</a-radio>
              </a-radio-group>

            </a-form-item>
          </a-col> -->
        </a-row>

        <!-- <a-row :gutter="24">
          <a-col :span="24">
            <a-form-item label="角色" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
              <a-select
                id="userModal-roleNames"
                v-decorator="[
                  'formData.roleNames',
                  {
                    initialValue: formData.roleNames,
                    rules: [{ required: true, message: '请选择角色!' }] },
                ]"
                mode="multiple"
                style="width: 100%"
                placeholder="请选择角色"
                allowClear
              >
                <a-select-option
                  v-for="item in roleList"
                  :key="item.id"
                  :disabled="item.isEnable == '0' ? true : false"
                >{{ item.name }}</a-select-option
                >
              </a-select>
            </a-form-item>
          </a-col>

        </a-row> -->
        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-item label="备注" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
              <a-textarea
                id="userModal-remarks"
                :maxLength="500"
                v-decorator="[
                  'formData.remarks',
                  {
                    initialValue: formData.remarks,getValueFromEvent: $filterEmpty,
                    rules: [] },
                ]"
                style="min-height: 50px;"
                placeholder="请输入备注(最多500个字符)"
                autosize />
            </a-form-item>
          </a-col>
        </a-row>
        <a-form-item :wrapper-col="{ span: 24, offset: 10}">
          <a-button type="primary" @click="handleSubmit()" id="userModal-handleSubmit" :style="{ marginRight: '15px' }">
            保存
          </a-button>
          <a-button :style="{ marginLeft: '15px' }" @click="handleCancel()" id="userModal-handleCancel">
            取消
          </a-button>
        </a-form-item>
      </a-form>

    </a-modal>
  </div>
</template>

<script>
import { STable, VSelect } from '@/components'
import { sellerList, saveUserPower, slelerDetails } from '@/api/userManage.js'
export default {
  name: 'UserModal',
  components: {
    STable, VSelect
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    itemId: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      titleText: '新增用户',
      isshow: this.visible,
      formLayout: 'horizontal',
      form: this.$form.createForm(this, { name: 'miniForm' }),
      optionData: [],
      formData: {
        // roleNames: undefined, // 角色
        name: '',
        loginFlag: '', // 活动状态
        phone: '',
        sex: '',
        remarks: '',
        orgCode: undefined
      }

    }
  },
  methods: {
    cancel (e) {
      this.clear()
      this.$emit('close')
    },
    handleChange (value) {
	    console.log(`selected ${value}`)
	  },
	  handleBlur () {
	    console.log('blur')
	  },
	  handleFocus () {
	    console.log('focus')
	  },
	  filterOption (input, option) {
	    return (
	      option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
	    )
	  },
	  // 获取合作商数据
	  getSellerList () {
		  sellerList().then(res => {
			  console.log(res, '-----合作商')
			  if (res.status == 200) {
				  this.optionData = res.data || []
			  }
		  })
	  },
	  getPageInfo () {
	    slelerDetails({
	      id: this.itemId
	    }).then(res => {
	      if (res.status == 200) {
			  console.log(res, '-------------返回数据')
	        this.form.setFieldsValue({ 'formData': res.data })
	        this.form.setFieldsValue({ 'formData.loginFlag': Number(res.data.loginFlag) })
	        // this.form.setFieldsValue({ 'formData.name': res.data.name })
	        // this.form.setFieldsValue({ 'formData.phone': res.data.phone })
	        // this.form.setFieldsValue({ 'formData.sex': res.data.sex })
	        // this.form.setFieldsValue({ 'formData.org.name': res.data.org.name })
	        // this.form.setFieldsValue({ 'formData.remarks': res.data.remarks })
	      }
	    })
	  },
    // 保存提交
    handleSubmit () {
      const _this = this
      this.form.validateFields((err, values) => {
		  if (!err) {
		    const formData = Object.assign({}, this.formData, values.formData)
          formData.id = _this.itemId
		    saveUserPower(formData).then(res => {
		      console.log(res, 'rrrrrrrrr')
		      if (res.status == 200) {
		        _this.$message.success(res.message)
              _this.$emit('refresh')
		        setTimeout(function () {
		          _this.isshow = false
		        }, 300)
		      }
		    })
		  }
      })
      // const _this = this
      // this.form.validateFields((err, values) => {
      //   console.log(values, 'values222')
      //   if (!err) {
      //     // values.formData.roleNames = values.formData.roleNames.join(',')
      //     console.log(values.formData, ' formData.type222222222')
      //     console.log(Object.assign({ id: this.data.id ? this.data.id : '' }, values.formData))
      //     saveUserPower(Object.assign({ id: this.data.id ? this.data.id : '' }, values.formData)).then(res => {
      //       console.log(res, 'res--save')
      //       if (res.status + '' === '200') {
      //         this.$message.success(res.message ? res.message : '保存成功')
      //         this.$emit('refresh')
      //         setTimeout(function () {
      //           _this.cancel()
      //         }, 300)
      //       } else {
      //         // this.$message.error(res.message)
      //       }
      //     })
      //   }
      // })
    },
    // 取消
    handleCancel () {
      this.cancel()
    },
    clear () {
      this.form.resetFields()
      delete this.formData.id
      // this.formData.roleNames = []
      this.formData.name = ''
      this.formData.loginFlag = ''
      this.formData.phone = ''
      this.formData.sex = ''
      this.formData.remarks = ''
	  this.formData.orgCode = undefined
    }

    // 获取角色列表接口
    // getRoleList () {
    //   getRoleList().then(res => {
    //     console.log(res, 'res--role')
    //     if (res.status + '' === '200') {
    //       this.roleList = res.data
    //     } else {
    //       this.$message.warning(res.message)
    //     }
    //   })
    // }

  },
  mounted () {
    // this.getRoleList()
    this.getSellerList()
  },
  beforeCreate () {
    this.form = this.$form.createForm(this, { name: 'miniForm' })
  },
  watch: {
    visible (newValue, oldValue) {
      this.isshow = newValue
    },
    isshow (val) {
      if (!val) {
		  this.$emit('close')
      } else {
        this.form.resetFields()
      }
    },
    itemId (newValue, oldValue) {
	  console.log(newValue, '----------id')
	  if (newValue && this.isshow) {
	    this.titleText = '编辑'
	    this.getPageInfo(newValue)
	  } else {
	  this.titleText = '新增用户'
	  }
    }
  }
}
</script>

<style >
  .modalBox{
  }
  .ant-modal-footer {
    display: none;
  }
</style>
