<template>
  <div class="list">
    <div class="group" v-for="(groupItem, groupIndex) in groupList" :key="groupIndex">
      <div class="group-name">
        <div style="display: inline-block;">{{ groupItem.workTpNm }}</div>
        <div class="item btns" style="display: inline-block;float: right;">
          <!--<a @click="editGroup(groupItem)">编辑</a>
          <a @click="deleteGroup(groupItem.workTpId)">删除</a>-->
        </div>
      </div>
      <div
        style="color: #858585;text-align: center;margin-bottom: 10px;"
        v-if="groupItem.templateList.length === 0"
      >
        暂无模板数据
      </div>
      <div class="group-item" v-for="(taskItem, taskIndex) in groupItem.templateList" :key="taskIndex">
        <div class="item" style="width: auto;">
          <img
            :src="taskItem.iconImage || defaultIcon"
            style="width: 50px;height: 50px;float: left;margin-right: 12px;border-radius: 8px;">
          <div style="float: left;">
            <div style="font-size: 15px;color: #323334;letter-spacing: 0;text-align: left;">
              {{ taskItem.templateNm }}
            </div>
            <div class="text-desc">
              {{ taskItem.templateExplain }}
            </div>
          </div>
          <!-- <a-divider type="vertical" style="height: 60px"/>-->
        </div>

        <!-- <div class="item" style="width:auto">
          <div style="float: left;">
            <div style="font-size: 15px;color: #323334;letter-spacing: 0;text-align: left;">
              可见范围

            </div>

            <div class="text-desc">
              {{ taskItem.createRoles}}

              <span @click="showModal(taskItem.templateId)" style="color: #1890ff; cursor: pointer;">修改</span>
              <a-modal
                title="可见范围"
                :visible="visible"
                @ok="handleOk(taskItem.templateId)"
                :confirmLoading="confirmLoading"
                @cancel="handleCancel"
              >
                <a-select mode="tags" style="width: 100%" v-model="mat" :tokenSeparators="[',']" @change="handleSelect">
                  <a-select-option v-for="i in allList" :key="(i.id).toString()">{{i.name}}</a-select-option>
                </a-select>
              </a-modal>
            </div>

          </div>
          <a-divider type="vertical" style="height: 60px"/>

        </div>-->

        <!--<div class="item" style="width: auto">
          <div style="float: left;">
            <div style="font-size: 15px;color: #323334;letter-spacing: 0;text-align: left;">
              工单开放入口

            </div>

            <div class="text-desc" v-if="taskItem.phone == 1">
              手机创建<span @click="showModalE" style="color: #1890ff; cursor: pointer;">修改</span>
              <a-modal
                title="工单开放入口"
                :visible="visibleE"
                @ok="handleOkE"
                :confirmLoading="confirmLoadingE"
                @cancel="handleCancel"
              >
                <a-radio-group @change="onChange" v-model="value">
                  <a-radio :style="radioStyle" :value="1">手机创建</a-radio>
                  <a-radio :style="radioStyle" :value="2">不可开发人工创建</a-radio>
                </a-radio-group>
              </a-modal>
            </div>

            <div class="text-desc" v-else>
              不可开发人工创建<span @click="showModalE" style="color: #1890ff; cursor: pointer;">修改</span>
              <a-modal
                title="工单开放入口"
                :visible="visibleE"
                @ok="handleOkE"
                :confirmLoading="confirmLoadingE"
                @cancel="handleCancel"
              >
                <a-radio-group @change="onChange" v-model="value">
                  <a-radio :style="radioStyle" :value="1">不可开发人工创建</a-radio>
                  <a-radio :style="radioStyle" :value="2">手机创建</a-radio>
                </a-radio-group>
              </a-modal>
            </div>

          </div>
          <a-divider type="vertical" style="height: 60px"/>
        </div>-->

        <div class="item btns">
          <a-divider type="vertical" style="height: 60px"/>
          <a @click="editTask(taskItem.id)">编辑</a>
          <a v-if="taskItem.status==0" @click="pushTask(taskItem.id,groupItem.workTpId,taskItem.typeTemplate)">已修改</a>
          <a v-else>已发布</a>
          <!--          <a @click="deploymentTask(taskItem.templateId)">部署</a>-->
          <!-- <a v-if="taskItem.ifEnable==='1'" @click="toggleTaskStatus(taskItem.id, 0)">停用</a>-->
          <!--          <a v-if="taskItem.ifEnable==='0'" @click="toggleTaskStatus(taskItem.templateId, 1)">启用</a>-->
          <!-- <a v-if="taskItem.ifEnable==='0'" @click="deploymentTask(taskItem.id)">启用</a>-->
          <!-- <a @click="copyTask(taskItem.id)">复制</a>
          <a @click="moveTask(taskItem.id)">移动</a>-->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { Ellipsis } from '@/components';
  import { deployProcess } from '@/api/task';
  import { axios } from '@/utils/request';
  const defaultIcon = require('@/assets/i-ico.png');
  export default {
    name: 'GroupList',
    components: {
      Ellipsis
    },
    props: {
      list: {
        type: Array,
        default: function() {
          return [
            {
              workTpNm: '启停车',
              templateList: [
                {
                  templateNm: 'wx'
                }
              ]
            }
          ];
        }
      }
    },
    data() {
      return {
        defaultIcon: defaultIcon,
        groupList: this.list,
        title: 'wx',
        ModalText: 'Content of the modal',
        visible: false,
        visibleE: false,
        confirmLoading: false,
        confirmLoadingE: false,
        value: 1,
        radioStyle: {
          display: 'block',
          height: '30px',
          lineHeight: '30px'
        },
        mat: ['1', '2'],
        allList: '',
        z: ['z'],
        val: 1
      };
    },
    methods: {
      deploymentTask(id) {
        this.$emit('deploymentTask', id);
      },
      pushTask(id, workTpid,typeTemplate) {
        this.$emit('pushTask', { id: id, workTpId: workTpid,typeTemplate:typeTemplate });
      },
      onChange(e) {
        console.log('radio checked', e.target.value)``;
      },
      handleSelect(value) {
        const _this = this;
        _this.val = value;
        console.log(`selected ${value}`);
      },
      editTask(id) {
        this.$emit('editTask', id);
      },
      moveTask(id) {
        this.$emit('moveTask', id);
      },
      copyTask(id) {
        this.$emit('copyTask', id);
      },
      toggleTaskStatus(id, status) {
        this.$emit('toggleTaskStatus', {
          id, status
        });
      },
      deleteGroup(id) {
        this.$confirm2({
          title: '提示',
          content: '确定要删除此分组吗？',
          okType: 'danger',
          onOk: () => {
            this.$emit('deleteGroup', id);
          },
          onCancel: () => {
          }
        });
      },
      editGroup(groupItem) {
        console.log(groupItem);
        this.$emit('editGroup', groupItem);
      },
      showModal(e) {
        this.visible = true;
        const _this = this;
        axios.get('/task/tb-role/getRoleByTempId?templateId=' + e + '')
          .then(function(response) {
            console.log(response);
            _this.allList = response.data.allList;
            JSON.parse(JSON.stringify(_this.allList));
            console.log(_this.allList);
            _this.mat = response.data.list;
            _this.mat = _this.mat.split(',');
          })
          .catch(function(error) {
            console.log(error);
          });
      },
      showModalE() {
        this.visibleE = true;
      },
      handleOk(e) {
        console.log(e);
        var _this = this;
        this.ModalText = 'The modal will be closed after two seconds';
        this.confirmLoading = true;
        const valC = _this.val.toString();
        setTimeout(() => {
          axios.put('/task/work-template/updateOne', {
            createRoles: valC,
            templateId: e
          })
            .then(function(response) {
              console.log(response);
              // console.log('--------')
            })
            .catch(function(error) {
              console.log(error);
            });
          this.visible = false;
          this.confirmLoading = false;
          location.reload();
        }, 2000);
      },
      handleOkE(e) {
        this.ModalText = 'The modal will be closed after two seconds';
        this.confirmLoadingE = true;
        setTimeout(() => {
          this.visibleE = false;
          this.confirmLoadingE = false;
        }, 2000);
      },
      handleCancel(e) {
        console.log('Clicked cancel button');

        this.visible = false;
        this.visibleE = false;
      }
    },

    watch: {
      list: function(newVal, oldVal) {
        this.groupList = newVal;
      }
    }
  };
</script>

<style lang="less" scoped>
  .list {
    .group {
      .btns {
        a {
          padding: 0 10px;
        }
      }

      .group-name {
        padding: 10px;
        background-color: #f2f2f2;
        margin-bottom: 10px;
      }

      .group-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 10px;
        border-bottom: 1px #e8e8e8 solid;

        .text-desc {
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          width: 166px;
          font-size: 12px;
          color: #858585;
          letter-spacing: 0;
          text-align: left;
          display: inline-block;
        }
      }
    }
  }

  .footer {
    padding: 0 16px;
    margin: 48px 0 24px;
    text-align: center;

    .links {
      margin-bottom: 8px;

      a {
        color: rgba(0, 0, 0, 0.45);

        &:hover {
          color: rgba(0, 0, 0, 0.65);
        }

        &:not(:last-child) {
          margin-right: 40px;
        }
      }
    }

    .copyright {
      color: rgba(0, 0, 0, 0.45);
      font-size: 14px;
    }
  }
</style>
