<template>
  <div class="app-container" style="width: 800px;margin: 0 auto;">
    <el-form ref="procureForm" :model="form" label-width="100px">
      <el-form-item label="姓名:" prop="name" :rules="rules.name">
        <el-input v-model="form.name" placeholder="请填写姓名" maxlength="6" style="width: 200px;" />
      </el-form-item>
      <el-form-item label="手机号:" prop="mobile" :rules="rules.mobile">
        <el-input v-model="form.mobile" placeholder="请填写手机号" maxlength="11" style="width: 200px" />
      </el-form-item>
      <el-form-item label="状态:" prop="status" :rules="rules.status">
        <el-select v-model="form.status" placeholder="请选择">
          <el-option label="上线" :value="90" />
          <el-option label="下线" :value="91" />
        </el-select>
      </el-form-item>
      <el-form-item label="关联机构：" prop="clubList" :rules="rules.clubList">
        <el-button type="primary" autofocussize="mini" size="mini" icon="el-icon-plus" @click="handleDialogVisible">选择机构</el-button>
        <el-checkbox-group v-show="false" v-model="form.clubList" />
        <el-table :data="form.clubList" border width="1000">
          <el-table-column prop="name" label="机构名称" align="center" />
          <el-table-column label="状态" align="center" prop="status">
            <template slot-scope="{row}">
              <template v-if="row.clubStatus*1===1">
                <el-tag type="warning" size="small">待审核</el-tag>
              </template>
              <template v-else-if="row.clubStatus*1===92">
                <el-tag type="danger" size="small">审核未通过</el-tag>
              </template>
              <template v-else>
                <el-tag v-if="row.clubStatus*1===91" type="danger" size="small">已下线</el-tag>
                <el-tag v-else type="success" size="small">已上线</el-tag>
              </template>
            </template>
          </el-table-column>
          <el-table-column label="联系人" align="center" prop="linkMan" />
          <el-table-column label="手机号" align="center" prop="contractMobile" />
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="handleDeleteClubs(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
    <div class="el-dialog__footer" style="text-align: center;">
      <el-button type="primary" @click="onSubmit('procureForm')">保存</el-button>
      <el-button plain @click="backToList">返回</el-button>
    </div>
    <!-- 商品弹框 -->
    <club-dialog v-if="dialogVisible" ref="clubDialog" @cancel="handleGoodCancel" @confirm="handleGoodConfirm" />
  </div>
</template>

<script>
import { saveProcure, detailsEcho } from '@/api/club'
import clubDialog from './components/club-multi-dialog'
export default {
  name: 'ProcureEdit',
  components: { clubDialog },
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: 'success',
        0: 'warning'
      }
      return statusMap[status]
    }
  },
  data() {
    const defaultForm = () => {
      return {
        organizeId: this.$store.getters.organizeId,
        name: '', // 采购员名称
        mobile: '', // 采购员手机号
        status: 90, // 上线状态
        clubList: []
      }
    }
    return {
      form: defaultForm(),
      activityList: [],
      editType: 'add',
      // 商品列表
      dialogVisible: false,
      loadImgLoading: false,
      rules: {
        name: [{ required: true, message: '请填写姓名', trigger: 'blur' }],
        mobile: [{ required: true, message: '请填写手机号', trigger: 'blur' }],
        clubList: [{ required: true, type: 'array', message: '请添加机构', trigger: ['change'] }],
        status: [{ required: true, message: '请选择状态', trigger: 'blur' }]
      }
    }
  },
  computed: {

  },
  created() {
    this.editType = this.$route.query.type || 'edit'
    if (this.editType === 'edit') {
      console.log('edit')
      this.detailsEcho(this.$route.query.id)
    }
  },
  methods: {
    // 获取采购员信息
    async detailsEcho(id) {
      try {
        const res = await detailsEcho(id)
        this.form = { ...this.form, ...res.data }
      } catch (error) {
        console.log('error', error)
      }
    },
    // 显示选择机构弹窗
    handleDialogVisible() {
      this.dialogVisible = true
    },
    // 删除机构
    handleDeleteClubs(index) {
      this.form.clubList.splice(index, 1)
    },
    // 确认选择机构
    handleGoodConfirm(data) {
      this.form.clubList = this.form.clubList.concat(data)
      console.log('clubList', this.form.clubList)
      this.handleGoodCancel()
    },
    // 提交
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$confirm('是否提交数据', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            console.log('form', this.form)
            this.saveProcure(this.form)
          })
        } else {
          return false
        }
      })
    },
    // 保存
    async saveProcure(params) {
      try {
        const res = await saveProcure(params)
        this.$message.success(res.msg)
        setTimeout(() => {
          this.$router.push({ path: '/procure/list', query: { type: 1 }})
        }, 1000)
      } catch (error) {
        console.log('error', error)
      }
    },
    // 取消选择机构
    handleGoodCancel() {
      this.dialogVisible = false
      this.$refs.clubDialog.visible = false
    },
    changeGrop(value) {
      console.log('value', value)
    },
    backToList() {
      this.$store.dispatch('tagsView/delView', this.$route).then(() => {
        this.$nextTick(() => {
          this.$router.replace({ path: '/procure/list' })
        })
      })
    }
  }
}
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    float: left;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon{
    font-size: 30px;
    color: #999999;
  }
  .el-form-item__label{
      text-align: right !important;
  }
  .el-upload__tip{
    line-height: 20px;
    color: red;
    text-align: left;
    position: absolute;
    right: -50%;
    bottom: 0;
  }
  .span_tip{
    font-size: 12px;
    color: red;
    margin-left: 5px;
  }
  .filter-item-temp{
    width: 100px;
  }
</style>
