<template>
  <div class="welcomeList page-body">
    <div class="page-search row items-center">
      <div class="col row wrap q-mr-lg q-col-gutter-md">
        <div class="col-3">
          <q-select filled stack-label @input="changePage(1)" option-value="Id" option-label="Name"
            v-model="msg.Type" ref="Id" :options="typeList" label="类型" :dense="false" emit-value
            map-options />
        </div>
     
      </div>
    </div>
    <div class="page-content">
      <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat class="sticky-column-table"
        separator="none" title="" :data="data" :columns="columns" row-key="name">
        <template v-slot:top="props">
          <div class="col-2 q-table__title">欢迎语列表</div>
          <q-space />
          <q-btn color="accent" style="float:right;margin-right:0;" size="sm" class="q-mr-md" icon="add" label="新增欢迎语"
            @click="goadd()"></q-btn>
        </template>
        <template v-slot:body-cell-Type="props">
          <q-td :props="props">
            <span v-if="props.row.Type==1">文本</span>
            <span v-if="props.row.Type==2">图片</span>
            <span v-if="props.row.Type==3">图文</span>
            <span v-if="props.row.Type==4">小程序</span>
          </q-td>
        </template>
        <template v-slot:body-cell-Content="props">
          <q-td :props="props">
            <div style="max-width: 800px;white-space: normal;">
              {{props.row.Content}}
            </div>
          </q-td>
        </template>
      

        <template v-slot:body-cell-optioned="props">
          <q-td :props="props">

            <q-btn flat size="xs" icon="edit" style="font-weight:400;color: #3FC4FF" class="q-mr-xs" label="编辑"
              @click="goedit(props.row)" />
            <q-btn flat size="xs" icon="delete" color="negative"  class="q-mr-xs" label="删除"
              @click="goDetailed(props.row)" />
          </q-td>
        </template>
        <template v-slot:bottom>
          <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="pageCount"
            :input="true" @input="changePage" />
        </template>
      </q-table>
    </div>

  </div>
</template>

<script>
  import {
    getWeChatWelcomesPageList,
  } from '../../api/system/wechat';

  export default {
    meta: {
      title: "欢迎语列表"
    },
    name: "welcomeList",
    data() {
      return {
        loading: false,
        ISsystem: false,
        data: [],
        pageCount: 0,
        msg: {
          pageIndex: 1,
          pageSize: 15,
          rowsPerPage: 15,
          Type: 0,
        },
        typeList:[
          {Id:0,Name:'不限'},
          {Id:1,Name:'文本'},
          {Id:2,Name:'图片'},
          {Id:3,Name:'图文'},
          {Id:4,Name:'小程序'},
        ],
        //公告column
        columns: [{
          name: 'Type',
          label: '欢迎语类型',
          align: 'left'
        },
        {
          name: 'Content',
          field: 'Content',
          label: '欢迎语内容',
          align: 'left',
        },
        {
          name: 'UserIdName',
          field: 'UserIdName',
          label: '使用成员',
          align: 'left'
        },
        {
          name: 'UpdateByName',
          field: 'UpdateByName',
          label: '创建者',
          align: 'left'
        },
        {
          name: 'UpdateTime',
          field: 'UpdateTime',
          label: '创建时间',
          align: 'left'
        },
        {
          name: 'optioned',
          label: '操作',
          field: 'DeptId'
        }
        ],

      }
    },
    created() {
      this.getList()
    },
    methods: {
      changePage(e) {
        this.msg.pageIndex = 1
        this.getList()
      },
      getList() {
        this.loading = true
        getWeChatWelcomesPageList(this.msg).then(res => {
          this.loading = false
          this.data = res.Data.PageData;
          this.pageCount = res.Data.Count
          this.data.forEach(x=>{
            x.UserIdName=''
            x.UserIdList.map((j,i)=>{
              if(j==-1){
                x.UserIdName='通用'
                return
              }else{
                if(i+1!=x.UserIdList.length){
                  x.UserIdName=x.UserIdName+'某某、'
                }else{
                  x.UserIdName=x.UserIdName+'某某'
                }
              }
            })
          })
        })
      },
      goadd() {
        this.$router.push({
          path: '/enterprise/addWelcome',
        });
      },
      goedit(){//编辑

      },
      goDetailed(row){//修改
        console.log(row)
      }

    }
  }

</script>

<style>
  .welcomeList .Sysuser_Date .el-input--prefix .el-input__inner {
    background-color: red;
    border: 0;
  }

  .welcomeList .state-item {
    padding: 2px 5px;
    border-radius: 3px;
    text-align: center;
    font-size: 10px;
  }

  .welcomeList .frIdlist {
    padding: 3px 10px;
    border-radius: 3px;
    background: #EEEEEF;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
    margin-bottom: 5px;
    cursor: pointer;
  }

  .class-popover .q-pr-lg {
    padding-right: 0;
    margin-top: 20px;
  }

  .welcomeList .el-date-editor.el-input {
    width: 100%;
  }

  .welcomeList .el-date-editor.el-input input {
    background-color: transparent !important;
  }

  .welcomeList .el-range-editor .el-range-input {
    background: none;
  }

  .Sysuser_Date .el-input__inner {
    background: transparent !important;
    border: 0 !important;
  }

  .welcomeList .el-drawer.rtl {
    overflow: inherit;
  }
</style>