<template>
  <!--
    	作者：wangxw
    	时间：2019-05-05
    	描述：分类模板
    -->
  <div class="d-s-s">
    <!--分类不同样式展示-->
    <div class="model-container">
      <el-table size="small" :data="menus" border style="width: 100%" v-loading="loading">
        <el-table-column prop="text" label="名称"></el-table-column>
        <el-table-column label="选中图标">
          <template slot-scope="scope">
            <img :src="scope.row.selectedIconPath" width="36" height="36" />
          </template>
        </el-table-column>
        <el-table-column label="未选中图标">
          <template slot-scope="scope">
            <img :src="scope.row.iconPath" width="36" height="36" />
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="50">
          <template slot-scope="scope">
            <el-button @click="editClick(scope.row)" type="text" size="small" v-auth="'/page/tabbar/edit'">编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--图片展示参数-->
    <div class="param-container flex-1">
      <div class="common-form"><span>其它设置</span></div>
      <el-form size="small" label-width="100px">
        <el-form-item label="选中颜色">
          <div class="d-s-c">
            <el-color-picker v-model="form.color"></el-color-picker>
          </div>
          <p class="gray9">底部导航选中时文字颜色</p>
        </el-form-item>
        <el-form-item label="未选中颜色">
          <div class="d-s-c">
            <el-color-picker v-model="form.no_color"></el-color-picker>
          </div>
          <p class="gray9">底部导航未选中文字颜色</p>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="submit()" :loading="save_loading">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--修改-->
    <Edit v-if="open_edit" :open_edit="open_edit" :editform="currentModel"
      @closeDialog="closeDialogFunc($event)"></Edit>
  </div>
</template>

<script>
  import PageApi from '@/api/page.js';
  import Edit from './Edit.vue';
  export default {
    components: {
      Edit
    },
    data() {
      return {
        loading: false,
        save_loading: false,
        /*表单数据对象*/
        form: {
          color: '#E2231A',
          no_color: '#999999'
        },
        menus: [],
        /*是否打开编辑弹窗*/
        open_edit: false,
        /*当前编辑的对象*/
        currentModel: {}
      };
    },
    created() {
      this.getData();
    },
    methods: {
      /*获取数据*/
      getData() {
        let self = this;
        self.loading = true;
        PageApi.getTabbar({}, true).then(res => {
          self.loading = false;
          self.menus = res.data.vars.menus;
          self.form.color = res.data.vars.color;
          self.form.no_color = res.data.vars.no_color;
        }).catch(error => {
          self.loading = false;
        });
      },

      /*打开编辑*/
      editClick(item) {
        this.currentModel = item;
        this.open_edit = true;
      },

      /*关闭弹窗*/
      closeDialogFunc(e) {
        this.open_edit = e.openDialog;
        if (e.type == 'success') {
          this.getData();
        }
      },

      /*提交*/
      submit() {
        let self = this;
        self.save_loading = true;
        let params = self.form;
        params.type = 'color';
        PageApi.editTabbar(params, true)
          .then(data => {
            self.save_loading = false;
            self.$message({
              message: '恭喜你，修改成功',
              type: 'success'
            });
            self.getData();
          })
          .catch(error => {
            self.save_loading = false;
          });
      }
    }
  };
</script>

<style scoped="scoped">
  .model-container {
    width: 700px;
    height: calc(100vh - 150px);
    margin-right: 30px;
  }

  .param-container {
    padding: 20px;
    height: calc(100vh - 150px);
    border: 1px solid #cccccc;
  }
</style>
