<template lang="html">
  <div class="">
    <!-- "管理讲师的相关信息；
    对讲师信息能做增删改操作；
    对讲师可以实现查询名称；" -->

    <mu-container style="margin-top: 10px;">
      <el-form :inline="true" ref="form" :model="form" label-width="80px">
        <el-form-item label="讲师名称">
            <el-input v-model="form.name" placeholder="请输入讲师名称"></el-input>
        </el-form-item>
        <el-form-item v-if="!is_mobile">
          <el-button @click="submit">查询</el-button>
        </el-form-item>
        <el-form-item style="float: right;">
          <el-button v-if="!is_mobile" type="primary" @click="add" icon="el-icon-plus">新增</el-button>
          <el-button v-else @click="add">新增</el-button>
        </el-form-item>
        <div style="clear: both;"></div>
      </el-form>
      <mu-paper :z-depth="1">
        <mu-data-table :columns="columns" :data="list" stripe>
          <template slot-scope="scope">
            <td class="is-center">{{scope.row.name}}</td>
            <td class="is-center">{{scope.row.intro}}</td>
            <td class="is-left">
              <p v-for="(v,k) in scope.row.tag" :key="k" class="table-tag">{{v}}</p>
            </td>
            <td class="is-center">
              {{formatter(scope.row.books)}}
            </td>
            <td class="is-center">
              <span @click="edit(scope.row)" class="opt-btn" style="margin-right: 8px;">编辑</span>
              <span @click="deleteBtn(scope.row)" class="opt-btn">删除</span>
            </td>
          </template>
        </mu-data-table>
      </mu-paper>
      <mu-flex class="flex-wrapper" justify-content="end" style="margin-top: 15px;">
        <mu-flex class="flex-demo" justify-content="center" >
          <mu-pagination :total="100" :current.sync="current" :page-size="10" :page-count="5"></mu-pagination>
        </mu-flex>
      </mu-flex>

      <mu-dialog title="编辑讲师信息" :width="body_width" :max-width="body_width" :open.sync="openSimple" :dialog-class="is_mobile ? 'mobile-dialog' : 'no-mobile-dialog'" :esc-press-close="false" :overlay-close="false">
        <mu-form ref="form" :model="validateForm" class="mu-demo-form" :label-position="label_position">
          <mu-form-item label="名称" prop="username" :rules="usernameRules">
            <mu-text-field v-model="validateForm.username" prop="username"></mu-text-field>
          </mu-form-item>
          <mu-form-item label="简介" prop="password">
              <mu-text-field v-model="validateForm.password" prop="password"></mu-text-field>
          </mu-form-item>
          <mu-form-item label="标签" prop="username" class="form-tag">
            <el-select v-model="multi.value1" multiple style="width: 100%;" placeholder="请选择">
              <el-option
                v-for="(val, index) in org_tags"
                :key="index"
                :label="val"
                :value="val">
              </el-option>
            </el-select>
          </mu-form-item>
          <mu-form-item label="作品" prop="password">
            <el-tag
              :key="k"
              v-for="(v, k) in books_tags"
              closable
              :disable-transitions="false"
              @close="handleClose(v)">
              {{v}}
            </el-tag>
            <el-input
              class="input-new-tag"
              v-if="inputVisible"
              v-model="inputValue"
              ref="saveTagInput"
              size="small"
              @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm"
            >
            </el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新作品</el-button>
          </mu-form-item>
        </mu-form>
        <mu-button slot="actions" color="primary" @click="closeSimpleDialog">确认</mu-button>
        <mu-button slot="actions" @click="closeSimpleDialog">关闭</mu-button>
      </mu-dialog>

      <mu-dialog title="提示" width="600" max-width="80%" :esc-press-close="false" :overlay-close="false" :open.sync="openAlert">
        是否删除该讲师信息?
        <mu-button slot="actions" color="primary" @click="closeAlertDialog">取消</mu-button>
        <mu-button slot="actions" @click="closeAlertDialog">确认</mu-button>
      </mu-dialog>

      <mu-dialog title="新增讲师信息" :width="body_width" :max-width="body_width" :open.sync="openAddDialog" :dialog-class="is_mobile ? 'mobile-dialog' : 'no-mobile-dialog'" :esc-press-close="false" :overlay-close="false">
        <mu-form ref="form" :model="validateForm" class="mu-demo-form" :label-position="label_position">
          <mu-form-item label="名称" prop="username" :rules="usernameRules">
            <mu-text-field v-model="validateForm.username" prop="username"></mu-text-field>
          </mu-form-item>
          <mu-form-item label="简介" prop="password">
              <mu-text-field v-model="validateForm.password" prop="password"></mu-text-field>
          </mu-form-item>
          <mu-form-item label="标签" prop="username">
            <el-select v-model="multi.value2" multiple style="width: 100%;" placeholder="请选择">
              <el-option
                v-for="(val, index) in org_tags"
                :key="index"
                :label="val"
                :value="val">
              </el-option>
            </el-select>
          </mu-form-item>
          <mu-form-item label="作品" prop="password">
            <el-input
              class="input-new-tag"
              v-if="inputVisible"
              v-model="inputValue"
              ref="saveTagInput"
              size="small"
              @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm"
            >
            </el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新作品</el-button>
          </mu-form-item>
        </mu-form>
        <mu-button slot="actions" color="primary" @click="closeAddDialog">确认</mu-button>
        <mu-button slot="actions" @click="closeAddDialog">关闭</mu-button>
      </mu-dialog>
    </mu-container>
  </div>
</template>

<script>
import util from 'assets/js/util';

export default {
  mounted () {
  },
  data () {
    return {
      is_mobile: util.versions().mobile,
      body_width: util.versions().mobile ? $('body').width() - 15 : $('body').width() * 0.5,
      body_max_width: $('body').width() - 10,
      label_position: util.versions().mobile ? 'top' : 'right',
      form: {
        name: ''
      },
      sort: {
        name: '',
        order: 'asc'
      },
      openSimple: false,
      openAddDialog: false,
      columns: [
        { title: '名称', name: 'name', width: '150', align: 'center' },
        { title: '简介', name: 'intro', align: 'center' },
        { title: '标签', name: 'tag', align: 'center' },
        { title: '作品', name: 'books', align: 'center' },
        { title: '操作', name: 'edit', width: '150', align: 'center' }
      ],
      list: [
        {
          name: '周大福',
          intro: '易学大师、国学讲师、辟谷导师、风水实战派专家',
          tag: ['健康养生', '国学文化', '易经风水', '健康养生', '国学文化', '易经风水'],
          books: ['易经风水大智慧', '智者人生课程体系', '易经风水与帝王之术', '道家秘传养生功法']
        },
        {
          name: '明德',
          intro: '易学大师、国学讲师、辟谷导师、风水实战派专家',
          tag: ['互联网+'],
          books: []
        }
      ],
      usernameRules: [
        { validate: (val) => !!val, message: '必须填写用户名' },
        { validate: (val) => val.length >= 3, message: '用户名长度大于3' }
      ],
      passwordRules: [
        { validate: (val) => !!val, message: '必须填写密码' },
        { validate: (val) => val.length >= 3 && val.length <= 10, message: '密码长度大于3小于10' }
      ],
      argeeRules: [{ validate: (val) => !!val, message: '必须同意用户协议' }],
      validateForm: {
        username: '',
        password: '',
        isAgree: false
      },
      teacher_tags: ['健康养生', '国学文化', '易经风水', '健康养生', '国学文化', '易经风水'],
      books_tags: ['易经风水大智慧', '智者人生课程体系', '易经风水与帝王之术'],
      inputVisible: false,
      inputValue: '',
      current: 1,
      openAlert: false,
      org_tags: [
        '健康养生', '国学文化', '易经风水', '易经风水大智慧', '智者人生课程体系', '易经风水与帝王之术', '健康养生', '国学文化', '易经风水', '易经风水大智慧', '智者人生课程体系', '易经风水与帝王之术'
      ],
      multi: {
        value1: ['健康养生', '国学文化', '易经风水'],
        value2: [],
        value3: []
      }
    }
  },
  methods: {
    handleSortChange ({ name, order }) {
      this.list = this.list.sort((a, b) => order === 'asc' ? a[name] - b[name] : b[name] - a[name]);
    },
    edit (v) {
      //
      this.openSimple = true;
      // setTimeout(() => {
      //   let tag_wrapper_width = $('.form-tag').find('.mu-form-item-content').width();
      //   let tag_width = $('.form-tag .mu-form-item-content').find('.el-tag').outerWidth();
      //   let tag_number = $('.form-tag .mu-form-item-content').children('.el-tag').length;
      //   let tag_add_width = $('.form-tag .mu-form-item-content').find('.button-new-tag').outerWidth();
      //   console.warn(tag_wrapper_width);
      //   console.warn(tag_width * tag_number + tag_add_width);
      // }, 500)
    },
    deleteBtn (v) {
      console.warn(0);
      this.openAlert = true;
    },
    closeSimpleDialog () {
      this.openSimple = false;
    },
    closeAddDialog () {
      this.openAddDialog = false;
    },
    formatter (v) {
      if (_.isNil(v)) {
        return ''
      } else {
        let temp = ''
        _.each(v, w => {
          temp += `《${w}》`
        });
        return String(temp).length > 30 ? String(temp).substr(0, 30) + '...' : String(temp).substr(0, 30)
      }
    },
    submit () {
      this.$refs.form.validate().then((result) => {
        console.warn('form valid: ', result)
      });
    },
    clear () {
      this.$refs.form.clear();
      this.validateForm = {
        username: '',
        password: '',
        isAgree: false
      };
    },
    handleClose (tag) {
      this.books_tags.splice(this.books_tags.indexOf(tag), 1);
    },
    showInput () {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm () {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.books_tags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    },
    openAlertDialog () {
      this.openAlert = true;
    },
    closeAlertDialog () {
      this.openAlert = false;
    },
    inputBlur (v) {
      console.warn();
    },
    add () {
      this.openAddDialog = true;
    },
    selectChange (v) {
    },
    selectClick () {
      console.warn(0);
      // $('.mu-option.is-selected .mu-item').css('color', '#2196f3')
      // $('.mu-option .mu-item').css('color', 'rgba(0,0,0,.87)')
    }
  }
}
</script>

<style lang="less" scoped>
.demo-button {
  margin: 6px 8px;
}

/deep/.mu-table th {
  border-right: 1px solid #ffffff;
  word-wrap: break-word;
  vertical-align: middle;
  white-space: normal;
  overflow: hidden;
  user-select: none;
  min-width: 0;
  box-sizing: border-box;
  vertical-align: middle;
  position: relative;
}

/deep/.mu-table th.is-sortable .mu-table-sort-icon {
  opacity: .6;
}

.container {
  max-width: 95%;
}

.table-tag {
  color: #ff6900;
  border: 1px solid #ff6900;
  border-radius: 8%;
  display: inline-block;
  padding: 1px 2px;
  margin: 5px 5px 5px 0;
}
.opt-btn:hover {
  cursor: pointer;
  color: #2196f3;
}

/deep/.mobile-dialog {
  height: 80%;
  overflow: scroll;
}
/deep/.no-mobile-dialog {
}
.el-tag {
  margin-top: 10px;
  margin-right: 10px;
}
.el-tag+.el-tag{
  margin-right: 10px;
}
.button-new-tag {
  margin-top: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-right: 10px;
  margin-top: 10px;
  vertical-align: bottom;
}
/deep/.mu-secondary-text-color {
  color: #2196f3;
}
/deep/.el-select {
  input {
    padding: 20px;
  }
}
</style>