<template>
  <el-row>
    <el-row>
      <el-form ref="searchForm" :model="searchForm" label-width="80px">
        <search-white-board :show-more="true" @search="list">
          <div slot="base">
            <el-row style="line-height: 40px; text-align: right;">
              <!-- <el-col :span="2"><label class="search-label">机构</label></el-col>
              <el-col :span="5">
                <select-organ v-model="searchForm.organIds" />
              </el-col> -->
              <el-col :span="2" :offset="1"><label class="search-label">教师名称</label></el-col>
              <el-col :span="5">
                <el-input v-model.trim="searchForm.name" placeholder="请输入教师名称" clearable />
              </el-col>
            </el-row>
          </div>

          <!-- <div slot="more">
            <el-row style="line-height: 40px; text-align: right;">
              <el-col :span="2"><label class="search-label">是否删除</label></el-col>
              <el-col :span="5" style="text-align: left;">
                <el-switch v-model="searchForm.isDel" active-color="#13ce66" inactive-color="#ff4949" @change="list" />
              </el-col>
            </el-row>
          </div> -->
        </search-white-board>
      </el-form>
    </el-row>

    <el-row>
      <white-board>
        <el-row>
          <el-col :span="2" :offset="22" style="text-align: right;">
            <el-button icon="el-icon-plus" type="success" plain @click="handleAdd">新增</el-button>
          </el-col>
        </el-row>

        <el-row style="padding: 10px 0px;">
          <el-table :data="tableData" style="width: 100%;" highlight-current-row stripe>
            <el-table-column prop="organName" label="机构名称" show-overflow-tooltip />
            <el-table-column prop="name" label="教师名称" show-overflow-tooltip />
            <!-- <el-table-column prop="avatarUrl" label="教师头像" show-overflow-tooltip>
              <template slot-scope="scope">
                <table-column-img-preview :home-url="HOME_URL" :img-u-r-l="scope.row.avatarUrl" />
              </template>
            </el-table-column> -->
            <el-table-column label="性别" width="50">
              <template slot-scope="scope">
                <label v-if="scope.row.gender === '1'">男</label>
                <label v-if="scope.row.gender === '2'">女</label>
              </template>
            </el-table-column>
            <el-table-column prop="tag" label="标签" show-overflow-tooltip>
              <template slot-scope="scope">
                <span v-for="item in scope.row.tag" :key="item">{{ item }} </span>
              </template>
            </el-table-column>
            <el-table-column prop="context" label="教师简介" show-overflow-tooltip />
            <el-table-column label="更新时间" width="140">
              <template slot-scope="scope">
                <el-row>{{ scope.row.updateByName }}</el-row>
                <el-row>{{ scope.row.updateAt }}</el-row>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="70" fixed="right">
              <template slot-scope="scope">
                <el-button type="primary" plain @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>

        <el-row>
          <el-pagination :current-page="searchForm.page" :page-sizes="[10, 20, 50, 100]" :page-size="50" layout="total, sizes, prev, pager, next, jumper" :total="total" small @size-change="changeSizeChange" @current-change="changeCurrentChange" />
        </el-row>
      </white-board>
    </el-row>

    <el-dialog :visible.sync="dialogVisible">
      <el-divider />
      <label slot="title" style="float: left;">{{ dialogTitle }}</label>

      <el-row>
        <el-form ref="form" :model="form" :rules="formRules" label-suffix="：" label-width="100px">
          <el-form-item label="机构">
            <select-organ v-model="form.organId" :multiple="false" />
          </el-form-item>
          <el-form-item label="教师名称" prop="name">
            <el-input v-model.trim="form.name" placeholder="请输入教师名称" clearable />
          </el-form-item>
          <!-- <el-form-item label="教师头像" prop="avatarUrl" style="text-align: left;">
            <upload-img v-model="form.avatarUrl" :limit="1" />
          </el-form-item> -->
          <el-form-item label="性别" style="text-align: left;">
            <el-radio-group v-model="form.gender">
              <el-radio label="1">男</el-radio>
              <el-radio label="2">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="标签">
            <el-row>
              <el-col :span="18">
                <el-input v-model="tagValue" placeholder="请输入标签名称" />
              </el-col>
              <el-col :span="2" :offset="2">
                <el-button @click="addTags">添加</el-button>
              </el-col>
            </el-row>
            <el-row style="padding-top: 20px">
              <el-col>
                <el-col style="text-align: left">
                  <el-tag
                    v-for="(tag,index) in tags"
                    :key="index"
                    style="margin-right:5px"
                    closable
                    :type="tag.type"
                    @close="handleClose(tag)"
                  >
                    {{ tag.name }}
                  </el-tag>
                </el-col>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="教师简介" prop="context" style="text-align: left;">
            <el-input v-model="form.context" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" />
          </el-form-item>
        </el-form>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-divider />
        <el-button @click="cancelDialog">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>
    </el-dialog>
  </el-row>
</template>

<script>
/* import UploadImg from '@/components/common/upload/upload-img' */
/* import TableColumnImgPreview from '@/components/common/table-column-img-preview' */
import { SelectOrgan } from '@/components/organ'
import teacherApi from '@/api/basics/teacherApi'

export default {
  name: 'Teacher',
  components: {
    /* 'upload-img': UploadImg, */
    /* 'table-column-img-preview': TableColumnImgPreview, */
    'select-organ': SelectOrgan
  },
  data() {
    return {
      searchForm: {
        name: '',
        organIds: [],
        isDel: false,
        page: 1,
        size: 50
      },
      total: 0,
      tableData: [],
      judgeTags: [],
      tagValue: '',
      tags: [],
      dialogTitle: '',
      dialogVisible: false,
      form: {
        id: '',
        name: '',
        gender: '',
        context: '',
        avatarUrl: '',
        tag: '',
        organId: ''
      },
      formRules: {
        name: [{ required: true, message: '请输入教师名称', trigger: 'blur' }],
        organId: [{ required: true, message: '请选择机构', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.list()
  },
  methods: {
    cancelDialog() {
      this.tags = []
      this.judgeTags = []
      this.dialogVisible = false
      this.$refs['form'].resetFields()
    },
    onChangeProvince(a) {
      this.form.province = a.value
    },
    onChangeCity(a) {
      this.form.city = a.value
    },
    onChangeArea(a) {
      this.form.area = a.value
    },
    addTags() {
      if (this.tagValue !== '' && this.judgeTags.includes(this.tagValue) === false) {
        this.tags.push({
          name: this.tagValue
        })
        this.judgeTags.push(this.tagValue)
        this.tagValue = '' // 添加完到数据后清空输入框内容
      } else {
        this.$message.error('不能添加重复的数据')
      }
    },
    handleClose(tag) {
      this.tags.splice(this.tags.indexOf(tag), 1)
      this.judgeTags.splice(this.judgeTags.indexOf(tag.name), 1)
    },
    handleAdd() {
      /* 重置表单 */
      this.form = {
        id: '',
        name: '',
        remarks: '',
        province: '广东省',
        city: '广州市',
        area: '',
        organId: ''
      }
      this.tagValue = ''
      this.tags = []
      this.judgeTags = []

      this.dialogTitle = '新增'
      this.dialogVisible = true
    },
    handleEdit(index, row) {
      this.form = row

      this.tagValue = ''
      this.tags = []
      this.judgeTags = []
      /* 重置表单 */
      if (row.tag !== null) {
        for (const item of row.tag) {
          this.tags.push({ name: item })
          this.judgeTags.push(item)
        }
      }
      this.dialogTitle = '编辑'
      this.dialogVisible = true
    },
    handleIsDel(index, row) {
      teacherApi.handleIsDel(row.id).then(data => {
        this.list()
      })
    },
    handleSave() {
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          return
        }
        this.form.tag = this.judgeTags
        teacherApi.saveOrUpdate(this.form).then(data => {
          this.list()

          this.dialogVisible = false
          this.$refs['form'].resetFields()
        })
      })
    },
    list() {
      this.tableData = []
      teacherApi.page(this.searchForm).then(data => {
        this.total = data.total
        this.tableData = data.data
      })
    },
    changeSizeChange(val) {
      this.searchForm.size = val
      this.list()
    },
    changeCurrentChange(val) {
      this.searchForm.page = val
      this.list()
    }
  }
}
</script>

<style scoped>
  /deep/ .distpicker-address-wrapper select{
    padding: 0px;
    height: 28px;
    color: #606266;
    font-size: 0.5rem;line-height: 0.3
  }
</style>
