<template>
  <div class="project page_container">
    <table-list v-bind="tableOptions" ref="tabList">
      <template #header-aside>
        <el-button type="primary" size="mini" @click="handleCreate">新建项目</el-button>
      </template>
      <!-- 项目Id -->
      <template v-slot:project_id="scope"><span class="details-handle" @click="handleDetails(scope.row)">{{scope.row.id}}</span></template>
      <!-- 状态 -->
      <template v-slot:status="{ row }">
        <el-switch v-model="row.status" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="停用"></el-switch>
      </template>
    </table-list>
    <el-drawer ref="drawer" :visible.sync="drawerVisible" size="490px" @close="handleDrawerClose">
      <template slot="title">
        <h5>
          {{drawerTitle}}
          <el-button v-if="drawerType !== 'create'" type="primary" @click="drawerType = 'edit'" size="mini" style="float:right;margin-right:30px;">编辑</el-button>
        </h5>
      </template>
      <div class="drawer__content">
        <el-form :model="form" :rules="rules" ref="drawerForm" label-width="80px" class="drawer-form" :disabled="isDetails">
          <el-form-item label="项目名称" prop="name">
            <el-input v-model="form.name" size="small"></el-input>
          </el-form-item>
          <el-form-item label="项目简称" prop="abbr">
            <el-input v-model="form.abbr" size="small"></el-input>
          </el-form-item>
          <el-form-item label="项目类型" prop="type">
            <el-select v-model="form.type" placeholder="请选择项目类型" size="small" style="width:100%;">
              <el-option :label="item.label" :value="item.id" v-for="item in projectTypeList" :key="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="项目网址" prop="website">
            <el-input v-model="form.website" size="small"></el-input>
          </el-form-item>
          <el-form-item label="广告类型" style="margin-bottom:0;">
            <el-checkbox :indeterminate="adType.isIndeterminate" v-model="adType.checkAll" @change="val => handleCheckAllChange(val, 'adType')">全选</el-checkbox>
            <div style="margin: 2px 0;"></div>
            <el-checkbox-group v-model="form.adType" @change="val => handleCheckedChange(val, 'adType')">
              <el-checkbox v-for="item in typeList" :label="item.id" :key="item.id">{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="文章类型" style="margin-bottom:0;">
            <el-checkbox :indeterminate="articleType.isIndeterminate" v-model="articleType.checkAll" @change="val => handleCheckAllChange(val, 'articleType')">全选</el-checkbox>
            <div style="margin: 2px 0;"></div>
            <el-checkbox-group v-model="form.articleType" @change="val => handleCheckedChange(val, 'articleType')">
              <el-checkbox v-for="item in typeList" :label="item.id" :key="item.id">{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="图文类型" style="margin-bottom:0;">
            <el-checkbox :indeterminate="imageTextType.isIndeterminate" v-model="imageTextType.checkAll" @change="val => handleCheckAllChange(val, 'imageTextType')">全选</el-checkbox>
            <div style="margin: 2px 0;"></div>
            <el-checkbox-group v-model="form.imageTextType" @change="val => handleCheckedChange(val, 'imageTextType')">
              <el-checkbox v-for="item in typeList" :label="item.id" :key="item.id">{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
        <div class="drawer__footer" v-if="drawerType !== 'details'">
          <el-button @click="handleDrawerClose" size="mini">取 消</el-button>
          <el-button type="primary" @click="handleDrawerSubmit" size="mini">提 交</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import TableList from '@/components/TableList'
const defaultForm = {
  name: '',
  abbr: '',
  type: '',
  website: '',
  adType: [],
  articleType: [],
  imageTextType: []
}
export default {
  components: { TableList },
  data() {
    return {
      activeName: '0',
      projectList: [
        { project_id: '111', project_name: '官网' },
        { project_id: '222', project_name: 'kellet' }
      ],
      statusList: [
        { id: '111', name: '启用' },
        { id: '222', name: '停用' }
      ],
      projectTypeList: [
        { id: '111', label: '学位教育' }
      ],
      selectedItem: {},
      drawerVisible: false,
      drawerType: '',
      form: Object.assign({}, defaultForm),
      rules: {
        name: { required: true, message: '请输入项目名称', trigger: 'blur' },
        abbr: { required: true, message: '请输入项目简称', trigger: 'blur' },
        type: { required: true, message: '请输入项目类型', trigger: 'blur' },
        website: { required: true, message: '请输入项目网址', trigger: 'blur' }
      },
      typeList: [
        { id: '111', name: 'banner广告' },
        { id: '122', name: '正文区广告' },
        { id: '1331', name: '侧边栏广告' }
      ],
      adType: {
        isIndeterminate: false,
        checkAll: false
      },
      articleType: {
        isIndeterminate: false,
        checkAll: false
      },
      imageTextType: {
        isIndeterminate: false,
        checkAll: false
      }
    }
  },
  computed: {
    isDetails() {
      return this.drawerType === 'details'
    },
    drawerTitle() {
      const type = this.drawerType
      let text = ''
      if (type === 'create') text = '新建项目'
      else if (type === 'edit') text = '编辑项目'
      else text = this.selectedItem.title || '项目详情'
      return text
    },
    tableOptions() {
      return {
        remote: {
          params: {}
        },
        filters: [
          {
            type: 'select',
            placeholder: '项目',
            prop: 'project',
            options: this.projectList,
            labelKey: 'project_name',
            valueKey: 'project_id'
          },
          { type: 'input', placeholder: '项目ID/项目名称', prop: 'id' },
          {
            type: 'select',
            placeholder: '状态',
            prop: 'type',
            options: this.statusList,
            labelKey: 'name',
            valueKey: 'id'
          }
        ],
        columns: [
          { prop: 'id', label: '项目ID', slots: 'project_id' },
          { prop: 'title', label: '项目名称' },
          { prop: 'abbr_title', label: '项目简称' },
          { prop: 'type', label: '项目类型' },
          { prop: 'url', label: '项目网址' },
          { prop: 'author', label: '创建人' },
          { prop: 'create_time', label: '创建时间' },
          { prop: 'status', label: '状态', slots: 'status' }
        ],
        data: [
          { id: '122', title: '索菲亚', abbr_title: 'sofia', type: '学前教育', url: 'www.baidu.com', author: '张三', create_time: '2021-04-23 09:00:31', status: 1 }
        ]
      }
    }
  },
  methods: {
    handleCreate() {
      this.drawerVisible = true
      this.drawerType = 'create'
    },
    handleDetails(val) {
      this.selectedItem = Object.assign({}, val)
      this.drawerVisible = true
      this.drawerType = 'details'
    },
    handleCheckAllChange(val, target) {
      this.form[target] = val ? this.typeList.map(item => item.id) : [];
      this[target].isIndeterminate = false;
    },
    handleCheckedChange(val, target) {
      const checkedCount = val.length;
      this[target].checkAll = checkedCount === this.typeList.length;
      this[target].isIndeterminate = checkedCount > 0 && checkedCount < this.typeList.length;
    },
    handleDrawerClose() {
      this.drawerVisible = false
      this.form = Object.assign({}, defaultForm)
    },
    handleDrawerSubmit() {
      this.$refs.drawerForm.validate(valid => {
        if (valid) {
          console.log('drawerForm')
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style scoped>
.details-handle{
  cursor:pointer;
}
.details-handle:hover{
  color:#409EFF;
}
.drawer__content{
  height:100%;
}
.drawer-form{
  width:450px;
  margin:0 20px;
  padding:20px 0 10px;
  min-height: calc(100% - 73px);
}
.drawer__footer{
  text-align:center;
  padding-bottom:15px;
}
</style>
