<template>
  <div>
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
      <el-form-item class="fontsize" label="基本信息" />
      <el-form-item label="标签组名称" prop="mobile">
        <el-input v-model="formData.mobile" placeholder="请输入标签组名称" :maxlength="15" show-word-limit clearable
          :style="{width: '50%'}"></el-input>
      </el-form-item>
      <el-form-item label="规则" prop="field101">
        <!-- <el-radio-group v-model="selectedOption" size="medium" style="padding-top: 11px;">
            <el-radio style="height: 30px;display: block;font-size: 14px;height: 25px;">仅可添加一个标签</el-radio>
            <el-tag style="height: 30px;color: #dfe4ed;background-color: rgb(255, 255, 255);">在此标签组内，一个客户仅能被添加一个标签</el-tag>
            <el-radio style="height: 30px;display: block;font-size: 14px;height: 25px;padding-top: 5px;" >可添加多个标签</el-radio>.
            <el-tag style="height: 30px;color: #dfe4ed;background-color: rgb(255, 255, 255);">在此标签组内，一个客户可同时被添加多个标签</el-tag>
          </el-radio-group> -->
          <el-radio-group v-model="formData.field101" size="medium" style="padding-top: 11px;">
            <el-radio :label="1">仅可添加一个标签<br/>
              <div class="el-form-item__error" style="height: 30px;color: #dfe4ed;background-color: rgb(255, 255, 255);">在此标签组内，一个客户仅能被添加一个标签</div>
            </el-radio>
            <br/>

            <el-radio :label="2" style="padding-top: 30px;">可添加多个标签<br/>
              <div class="el-form-item__error" style="height: 30px;color: #dfe4ed;background-color: rgb(255, 255, 255);">在此标签组内，一个客户可同时被添加多个标签</div>
            </el-radio>
            
        </el-radio-group>
      </el-form-item>
      <el-form-item label="设置标签" prop="postCode">
          <el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange" >
            <el-table-column label="标签名称"  align="center" prop="postId" />
            <el-table-column label="设为自动标签"  align="center" prop="postCode" />
            <el-table-column label="自动规则" align="center" prop="postName" />
            <el-table-column label="操作"  align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.row)"
                  v-hasPermi="['system:post:remove']"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      <div class="dialog-footer" style="padding-left: 5%;">
        <el-button style="color: #080808;background-color: #e6ebf5;border-color: #e8f4ff;" type="primary" @click="addBtn">添加标签</el-button>
      </div>
      <div class="dialog-footer" style="padding-left: 50%;">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-form>
  </div>
</template>
<script>
export default {
  components: {},
  props: [],
  data() {
    return {
      formData: {
        mobile: '',
        field101: 2,
      },
      rules: {
        mobile: [{
          required: true,
          message: '请输入标签组名称',
          trigger: 'blur'
        }],
        field101: [{
          required: true,
          message: '规则不能为空',
          trigger: 'change'
        }],
      },
      field101Options: [{
        "label": "仅可添加一个标签",
        "value": 1
      }, {
        "label": "可添加多个标签",
        "value": 2
      }],
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    addBtn () {
      this.postList.unshift({
          createBy: '',
          createTime: '',
          flag: '',
          falsepostCode: '',
          postId: '',
          postName: '',
          postSort: '',
          remark: '',
          status: '',
          updateBy: '',
          updateTime: ''
        })
    }
  }
}

</script>
<style>
.dialog-footer{
  align-items: center;
}
</style>
