<template>
  <div class="label_page">
    <el-dialog
      :title="dialog.title"
      :visible.sync="dialog.visible"
      width="40%"
      :before-close="close"
    >
      <el-form label-width="100px">
        <el-form-item label="标签名称">
          <el-col :span="12">
            <el-input v-model="form.model.name" />
          </el-col>
          <el-col :span="6" class="el_col_text">
            <el-button @click="fetch">查询</el-button>
          </el-col>
          <el-col :span="6" class="el_col_text">
            <span @click="manageTag">管理标签</span>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-row>
            <el-checkbox-group v-model="checkList">
              <el-row v-for="(item, index) in tableData.records" :key="index">
                <el-checkbox :label="item.id">{{ item.name }}</el-checkbox>
              </el-row>
            </el-checkbox-group>
          </el-row>
          <el-row>
            <pagination
              v-show="tableData.total > 0"
              :limit.sync="form.size"
              :page.sync="form.current"
              :total="Number(tableData.total)"
              @pagination="fetch"
            />
          </el-row>
        </el-form-item>
      </el-form>

      <div style="text-align:center;">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Label from '@/api/Label'
import Pagination from '@/components/Pagination'
export default {
  components: {
    Pagination
  },
  props: {
    dialog: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      form: {
        "current": 1,
        "map": {},
        "model": {
          "name": "",
          "type": ''
        },
        "order": "descending",
        "size": 10,
        "sort": "id"
      },
      checkList: [],
      list: [
        { name: '潜在客户', id: '1' },
        { name: '土豪', id: '2' },
        { name: '小气', id: '3' }
      ],
      tableData: {}
    }
  },
  created() {
    this.getLabelList()
    this.queryTag()
  },
  methods: {
    async getLabelList() {
      const res = await Label.getLabelList(this.form)
      const resData = res.data
      if (resData.code === 0) {
        this.tableData = resData.data
      }
    },
    async queryTag () {
      const res = await Label.queryTag(this.dialog.id)
      const resData = res.data
      const t = []
      if (resData.code === 0) {
        if (resData.data.length) {
          resData.data.forEach(item => {
            t.push(item.tagId)
          })
        }
        this.checkList = t
      }
    },
    fetch() {
      this.getLabelList()
    },
    manageTag() {
      this.$router.push({ path: '/customer-manage/label' })
    },
    close() {
      this.$emit('close')
    },
    confirm() {
      this.$emit('confirm', this.checkList)
    }
  }
}
</script>

<style lang='less' scoped>
.label_page {
    .el_col_text {
        text-align:center;
        font-size: 14px;
        color: #3A68F2;
        &:hover {
            cursor:pointer;
        }
    }
}

/deep/ .el-dialog__body {
    width: 80%;
    margin: 0 auto;
}
</style>
