<template>
  <div class="type page_container">
    <el-button class="btn-create" type="primary" @click="handleCreate" size="small">新建类型</el-button>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="项目类型" name="0" lazy>
        <table-list v-bind="projectTableOptions" ref="tabList">
          <!-- 项目Id -->
          <template v-slot:table-id="{ row }"><span class="details-handle" @click="handleDetails(row)">{{row.id}}</span></template>
          <!-- 状态 -->
          <template v-slot:table-status="{ row }">
            <el-switch v-model="row.status" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="停用"></el-switch>
          </template>
        </table-list>
      </el-tab-pane>
      <el-tab-pane label="内容类型" name="1" lazy>
        <table-list v-bind="contentTableOptions" ref="tabList">
          <!-- 项目Id -->
          <template v-slot:table-id="{ row }"><span class="details-handle" @click="handleDetails(row)">{{row.id}}</span></template>
          <!-- 状态 -->
          <template v-slot:table-status="{ row }">
            <el-switch v-model="row.status" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="停用"></el-switch>
          </template>
        </table-list>
      </el-tab-pane>
    </el-tabs>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="440px" @close="handleDialogClose" :destroy-on-close="true">
      <el-form :model="form" label-width="110px" ref="dialogForm" class="dialog-form">
        <template v-if="activeName === '0'">
          <el-form-item label="项目类型名称" prop="project_type_name" :rules="{ required: true, message: '请输入项目类型名称', trigger: 'blur' }">
            <el-input v-model="form.project_type_name" size="small"></el-input>
          </el-form-item>
        </template>
        <template  v-else>
          <el-form-item label="内容类型为：" prop="content_type" :rules="[{ required: true, message: '请选择手机号', trigger: 'change' }]">
            <el-select v-model="form.content_type" placeholder="请选择角色" size="small" style="width:100%;">
              <el-option :label="item.name" :value="item.id" v-for="item in contentTypeList" :key="item.id" ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="参数ID为：" prop="query_id" :rules="{ required: true, message: '请输入参数ID', trigger: 'blur' }">
            <el-input v-model="form.query_id" size="small"></el-input>
          </el-form-item>
          <el-form-item label="类型名称为：" prop="content_type_name" :rules="{ required: true, message: '请输入类型名称', trigger: 'blur' }">
            <el-input v-model="form.content_type_name" size="small"></el-input>
          </el-form-item>
        </template>
      </el-form>
      <span slot="footer">
        <el-button @click="handleDialogClose" size="mini">取 消</el-button>
        <el-button type="primary" @click="handleDialogSubmit" size="mini">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import TableList from '@/components/TableList'
const defaultForm = {
  project_type_name: '',
  content_type: '',
  query_id: '',
  content_type_name: ''
}
export default {
  components: { TableList },
  data() {
    return {
      activeName: '0',
      // 项目类型
      projectTableOptions: {
        remote: {
          params: {}
        },
        columns: [
          { prop: 'id', label: '项目类型ID', slots: 'table-id' },
          { prop: 'type', label: '项目类型' },
          { prop: 'author', label: '创建人' },
          { prop: 'create_time', label: '创建时间' },
          { prop: 'status', label: '状态', slots: 'table-status' }
        ],
        data: [
          { id: '123', type: '学位教育', author: '张三', create_time: '2021-04-23 09:00:31', status: 1 }
        ]
      },
      // 内容类型
      contentTableOptions: {
        remote: {
          params: {}
        },
        columns: [
          { prop: 'id', label: '内容ID', slots: 'table-id' },
          { prop: 'type_name', label: '类型名称' },
          { prop: 'type', label: '内容类型' },
          { prop: 'author', label: '创建人' },
          { prop: 'create_time', label: '创建时间' },
          { prop: 'query_id', label: '参数ID' },
          { prop: 'status', label: '状态', slots: 'table-status' }
        ],
        data: [
          { id: '123', type_name: '最新动态', type: '文章', author: '张三', create_time: '2021-04-23 09:00:31', query_id: '33', status: 1 }
        ]
      },
      contentTypeList: [
        { id: 0, name: '广告' },
        { id: 1, name: '文章' },
        { id: 2, name: '图文' }
      ],
      dialogVisible: false,
      dialogType: '',
      form: Object.assign({}, defaultForm)
    }
  },
  computed: {
    dialogTitle() {
      let text = this.dialogType === 'create' ? '新建' : '修改'
      text += this.activeName === '0' ? '项目' : '内容'
      return text + '类型'
    }
  },
  methods: {
    handleCreate() {
      this.dialogType = 'create'
      this.dialogVisible = true
    },
    handleDetails(val) {
      this.dialogType = 'details'
      this.dialogVisible = true
      const isProject = this.activeName === '0'
      this.form = {
        project_type_name: isProject ? val.type : '',
        content_type: isProject ? '' : val.type,
        query_id: isProject ? '' : val.query_id,
        content_type_name: isProject ? '' : val.type_name
      }
    },
    handleDialogClose() {
      this.dialogVisible = false
      this.form = Object.assign({}, defaultForm)
    },
    handleDialogSubmit() {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          console.log('dialogForm')
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style scoped>
.type{
  box-sizing:border-box;
  padding:15px;
  position:relative;
}
.btn-create{
  position:absolute;
  right:20px;
  top:16px;
  z-index:1;
}
</style>
