<template>
  <div class="context">
    <div class="panel">
      <h5>锻炼动作</h5>
      <div class="likeTab">
        <el-button @click="goType('ratingManage')" size="mini" type>动作分组</el-button>
        <el-button @click="goType('actionExercise')" size="mini" type="primary">锻炼动作</el-button>
        <el-button @click="goType('bodyNode')" size="mini" type>身体节点</el-button>
      </div>
      <div class="panel-body">
        <div class="panel_control">
          <el-row :gutter="1">
            <el-col :span="5" align="center">
              <em>动作名称:</em>
              <el-input v-model="panel.str" placeholder="请输入名称" type="text" style="width: 150px"/>
            </el-col>
            <el-col :span="5" align="center">
              <em>动作标签:</em>
              <el-input v-model="panel.tag" placeholder="请输入标签" type="text" style="width: 150px"/>
            </el-col>
            <el-col :span="4">
              <em>状态:</em>
              <!--status-->
              <el-select v-model="panel.status" placeholder="请选择">
                <el-option
                    v-for="item in panel.statusOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="2">
              <el-button size type="primary" @click="query" plain>查询</el-button>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="change">
      <el-button @click="addAction" size="mini" type="primary">新增动作</el-button>
      <el-button @click="editAction" size="mini">编辑动作</el-button>
      <el-button @click="deleteAction" size="mini" type="danger">删除动作</el-button>
    </div>
    <div class="table">
      <el-table :data="tableData" border is-horizontal-resize
                :default-sort="{ prop: 'date', order: 'descending' }" element-loading-background="rgba(0, 0, 0, 0.8)"
                class @selection-change="handleSelectionChange" @current-change="clickChange">
        >
        <el-table-column label="选择" width="55">
          <template slot-scope="scope">
            <el-radio v-model="tableRadio" :label="scope.row">
              <i></i>
            </el-radio>
          </template>
        </el-table-column>
        <el-table-column type="index" label="序号" align="center" width="60"/>
        <el-table-column prop="EaName" label="动作名称" align="center" sortable/>
        <el-table-column prop="EaTag" label="动作标签" align="center" sortable/>
        <el-table-column prop="PicUrl" label="动作图片" width="50">
          <template slot-scope="scope">
            <div class="demo-image__preview" v-if="scope.row.PicUrl">
              <el-image style="width: 25px; height: 25px" :src="scope.row.PicUrl"
                        :preview-src-list="[scope.row.PicUrl]">
              </el-image>
            </div>
            <img src="../assets/img/nav/head.png" alt="" v-else width="25px" height="25px">
          </template>
        </el-table-column>
        <el-table-column prop="VideoURl" label="视频地址" align="center" sortable/>
        <el-table-column prop="Memo" label="备注" align="center" sortable/>

        <el-table-column prop="id" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="manageAction(scope.row)">管理</el-button>
            <el-button type="success" v-if="scope.row.Status == 8" size="mini" @click="enableRow(scope.row,1)">
              启用
            </el-button>
            <el-button type="warning" v-if="scope.row.Status == 1" size="mini" @click="enableRow(scope.row,8)">
              禁用
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <br/>
      <el-pagination background :total="pagination.total" :page-size="pagination.pageItem"
                     @current-change="pageChange"
                     :current-page.sync="cur_page"
      ></el-pagination>
    </div>

    <el-dialog :title="dialogTitle" :visible.sync="addActionVisible" width="650px">
      <div class="dialogContent">
        <div class>
          <el-form ref="form" :model="form" label-width="160px">
            <el-form-item label="是否跨店" v-show="false">
              <el-radio-group v-model="form.isAcross" style="margin-left: -20.5rem">
                <el-radio-button :label="0">是</el-radio-button>
                <el-radio-button :label="1">否</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="动作名称" :required="true">
              <el-input v-model="form.name"/>
            </el-form-item>
            <el-form-item label="动作标签" :required="true">
              <el-input v-model="form.tag"/>
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="form.memo"/>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="dialogFooter">
        <el-button type="primary" size="small" v-if="form.btnType == 0" @click="confirmAddAction">确定</el-button>
        <el-button type="primary" size="small" v-if="form.btnType == 1" @click="confirmEditAction">确定</el-button>
        <el-button size="small" @click="addActionVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Global from '../Global.js'
import {
  GetHrSensorsPowerPercent,
  ExerciseActionQuery,
  ExerciseActionAdd,
  ExerciseActionEdit,
  ExerciseActionStatusEdit,
} from "../api/getApiRes";

let qs = require('qs');
export default {
  data() {
    return {
      activeName: 'comm',
      dialogVisible: false,//其他dialog
      addActionVisible: false,//新增动作分组弹窗
      dialogTitle: '新增心率设备',
      BtnGetAllPower: false,
      tableRadio: [],
      cur_page: 1,
      // panel 配置项目
      panel: {
        str: '',
        tag: '',
        status: "",
        draw: 1,
        start: 0,
        recordsTotal: 0,
        tableData: [],
        allTableData: [],
        loading: false,
        statusOptions: [
          {value: "", label: '全部'},
          {value: 1, label: '启用'},
          {value: 8, label: '禁用'},
        ]
      },
      multipleSelection: [],
      pagination: {
        pageItem: 10,
        pageOptions: pageOptions(),
        total: 100,
        pageIndex: 1,
      },
      form: {
        isAcross: 1,
        eaId: '',
        name: '',
        tag: '',
        memo: '',
        picUrl: '',
        videoUrl: '',
        btnType: 0,//0新建，1编辑编辑
        dialogData: [],//穿梭待选
        dialogValue: [],//穿梭已选
      },
      tableData: []
    }
  },
  mounted() {
    this.getTableQuery();
  },
  methods: {
    //顶部菜单项切换
    goType(url) {
      this.$router.push({path: '/' + url});
    },
    //tableData中的行点击事件
    clickChange(item) {
      this.tableRadio = item
    },
    //tableData中的行选择事件
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //动作分组动作管理
    manageAction(row) {
      this.$router.push({
        path: '/actionManage', query: {
          eaId: row.EaId,
          eaName: row.EaName
        }
      });
    },
    // 关闭所有弹窗
    allDialogClose() {
      this.dialogVisible = false;
    },
    //清除弹窗输入项
    clearForm() {
      this.form.eaId = "";
      this.form.name = "";
      this.form.tag = "";
      this.form.memo = "";
    },
    // 新增动作
    addAction() {
      this.clearForm();
      this.addActionVisible = true;
      this.form.btnType = 0;
      this.dialogTitle = '新增动作'
    },
    //确认提交新动作
    confirmAddAction() {
      let that = this;
      if (!that.form.name) {
        this.$message.error('错了哦，动作名称不能为空');
        return false
      }
      if (that.form.name.length > 20) {
        this.$message.error('动作名称过长，请重新编辑');
        return false
      }
      let param = {
        token: localStorage.token,
        shopId: that.form.isAcross == 0 ? 0 : localStorage.shopId,
        eaName: that.form.name,
        eaTag: that.form.tag,
        memo: that.form.memo
      };
      let postdata = qs.stringify(param);
      ExerciseActionAdd(postdata).then(res => {
        let json = res;
        if (json.Code == 0) {
          // 关闭弹窗
          that.addActionVisible = false;
          // 重载列表
          that.getTableQuery();
          that.$message({
            showClose: true,
            message: '动作添加成功！',
            type: 'success'
          });
        } else {
          that.$message.error(json.Memo + ' 错误码：' + json.Code);
        }
      })
    },
    //编辑动作分组
    editAction() {
      let that = this;
      this.clearForm();
      if (this.tableRadio.length == 0) {
        this.$message.error("请先选中一条记录");
        return false
      }
      this.dialogVisible = true;
      this.addActionVisible = true
      this.dialogTitle = '编辑动作分组';

      let row = this.tableRadio;
      this.form.isAcross = row.ShopId == 0 ? 0 : 1;
      this.form.eaId = row.EaId;
      this.form.name = row.EaName;
      this.form.tag = row.EaTag;
      this.form.memo = row.Memo;
      this.form.btnType = 1;
    },
    //提交编辑动作分组
    confirmEditAction() {
      let that = this;
      if (!that.form.name) {
        this.$message.error('错了哦，动作名称不能为空');
        return false
      }
      if (that.form.name.length > 20) {
        this.$message.error('动作名称过长，请重新编辑');
        return false
      }

      let param = {
        token: localStorage.token,
        shopId: that.form.isAcross == 0 ? 0 : localStorage.shopId,
        eaId: that.form.eaId,
        eaName: that.form.name,
        eaTag: that.form.tag,
        memo: that.form.memo
      };
      let postdata = qs.stringify(param);
      ExerciseActionEdit(postdata).then(res => {
        let json = res;
        if (json.Code == 0) {
          // 关闭弹窗
          that.addActionVisible = false;
          // 重载列表
          that.getTableQuery();
          that.$message({
            showClose: true,
            message: '动作分组编辑信息编辑成功！',
            type: 'success'
          });
        } else {
          that.$message.error(json.Memo + ' 错误码：' + json.Code);
        }
      })
    },
    //删除动作分组
    deleteAction() {
      let that = this;
      let row = this.tableRadio;
      let param = {
        token: localStorage.token,
        shopId: localStorage.ShopId,
        eaId: row.EaId,
        eaName: row.EaName,
        status: 9 //1：启用，8：禁用，9：删除
      };
      let postdata = qs.stringify(param);

      this.$confirm('此操作将永久删除该动作, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        ExerciseActionStatusEdit(postdata).then(res => {
          let json = res;
          if (json.Code == 0) {
            // table 重载
            that.getTableQuery();
            that.$message({
              showClose: true,
              message: '删除成功',
              type: 'success'
            });
          } else {
            that.$message.error(json.Memo);
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //设置行状态
    enableRow(row, status) {
      let that = this;
      let param = {
        token: localStorage.token,
        eaId: row.EaId,
        eaName: row.EaName,
        status: status //1：启用，8：禁用，9：删除
      };
      let postdata = qs.stringify(param);
      ExerciseActionStatusEdit(postdata).then(res => {
        let json = res;
        if (json.Code == 0) {
          that.$message({
            showClose: true,
            message: '执行成功！',
            type: 'success'
          });
          // table 重载
          that.getTableQuery();
        } else {
          that.$message.error(json.Memo + ' 错误码：' + json.Code);
        }
      })
    },
    //查看动作分组详情
    viewAction(row) {
      let that = this;
      let param = {
        token: localStorage.token,
        shopId: row.ShopId,
        hrId: row.HrId,
      };
      let postdata = qs.stringify(param);
      GetHrSensorsPowerPercent(postdata).then(res => {
        let json = res;
        if (json.Code == 0) {
          console.log(json);
          that.getTableQuery();
          that.$message({
            showClose: true,
            message: '电量获取成功！',
            type: 'success'
          });
        } else {
          that.$message.error(json.Memo);
        }
      })
    },
    // 查询按钮
    query() {
      let that = this;
      that.start = 0;
      that.cur_page = 1;
      this.getTableQuery();
      this.$message.success('查询完毕');
    },
    // 页面数据查询
    getTableQuery() {
      let that = this;
      that.loading = true;
      let param = {
        token: localStorage.token,
        shopId: localStorage.shopId,
        eaName: that.panel.str,
        eaTag: that.panel.tag,
        status: that.panel.status,
        agId: 0
      };
      let postdata = qs.stringify(param);
      ExerciseActionQuery(postdata).then(res => {
        let json = res;
        if (json.Code == 0) {
          that.loading = false;
          if (json.Rs) {
            that.allTableData = json.Rs;
            that.recordsTotal = json.Rs.length;
          } else {
            that.allTableData = [];
            that.recordsTotal = 0;
          }
          // 设置分页数据
          that.setPaginations();
        } else {
          that.$message.error(json.Memo + ' 错误码：' + json.Code);
        }
      })
    },
    // 设置分页数据
    setPaginations() {
      // 分页属性
      let that = this;
      that.pagination.total = that.recordsTotal;

      // 默认分页
      that.tableData = that.allTableData.filter((item, index) => {
        return index < that.pagination.pageItem;
      });
    },
    // 每页显示数量
    handleSizeChange() {
      let that = this;
      that.tableData = that.allTableData.filter((item, index) => {
        return index < that.pagination.pageItem;
      });
      that.draw = that.pagination.pageItem;
      // that.getTableQuery();
    },
    // 翻页
    pageChange(pageIndex) {
      let that = this;
      // 获取当前页
      let index = that.pagination.pageItem * (pageIndex - 1);
      // 数据总数
      let nums = that.pagination.pageItem * pageIndex;
      // 容器
      let tables = [];
      for (var i = index; i < nums; i++) {
        if (that.allTableData[i]) {
          tables.push(that.allTableData[i])
        }
        this.tableData = tables;
      }
      that.start = index * that.draw;
      // that.getTableQuery();
    },
    // 自动排序
    sortChange(params) {
      console.log(params)
    },
    //            过滤时间
    filterFmtDate(value, row, column) {
      let that = this;
      if (column == 0) {
        return '未获得'
      } else {
        return nonTfmtDatetoLength(new Date(column * 1000), 16);
      }
    },
  },
}
</script>

<style scoped>
@import "../assets/css/panel.css";

.context {
  /* height: 770px; */
  overflow-y: scroll;

  display: block;
  margin: 0 auto;
  background-color: #fff !important;
  padding: 30px;
}

.panel-body {
  padding: 20px;
  background: #f0f2f5;
}

.change {
  width: 100%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  padding-top: 10px;
  padding-bottom: 10px;
}

.change button {
  float: left;
}

.change button.pull-right {
  float: right;
}

.likeTab {
  width: 100%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  padding-top: 10px;
  padding-bottom: 0;
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
}

.likeTab button {
  float: left;
  border-radius: 0;
}

.likeTab button.pull-right {
  float: right;
}

.dialogTitle {
  width: 100%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  color: #000000;
  font-size: 18px;
  text-align: center;
}

.dialogTitle em {
  float: none;
  font-style: normal;
  color: #3799ff;
  margin: 0;
}

/deep/ .el-transfer-panel__item .el-checkbox__input {
  left: 40px;
}

.dialogFooter {
  width: 90%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  margin-top: 10px;
}

.dialogFooter button {
  float: right;
  margin-left: 10px;
}

.dialogContent {
  width: 100%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
}

.dialogContent .pull-left {
  width: 30%;
  float: left;
}

.dialogContent .pull-right {
  width: 70%;
  float: right;
}

.panel_control /deep/ .el-input {
  width: 90px;
  float: left;
}

.panel-body em {
  /*float: left;*/
  line-height: 40px;
  margin-right: 10px;
}

</style>