<template>
  <div class="card">
    <PageHeader :title="'消息'">
      <el-radio-group
        v-model="handleValue"
        size="medium"
        style="margin-left:8px"
        @change="getShowData"
      >
        <el-radio-button
          v-for="label in labels"
          :key="label"
          :label="label"
          :class="[`${theme}`]"
        />
      </el-radio-group>
      <hr class="split-line">
      <icon-font
        name="icon-more2"
        size="12"
        style="cursor:pointer"
        @click="getMoreInfo"
      />
      <template #image>
        <div class="icon-bg">
          <icon-font
            name="icon-remind"
            size="12"
            color="var(--text-color-9)"
          />
        </div>
      </template>
      <template #icon>
        <i
          class="el-icon-refresh-right refresh-icon"
          @click="handleRefresh"
        />
      </template>
    </PageHeader>
    <div class="content">
      <el-checkbox-group
        v-model="checkedCards"
        :class="theme"
        @change="handleCheckedCards"
      >
        <div
          v-for="(item,index) in processData"
          :key="index"
          class="item-card"
        >
          <div class="card-title">
            <el-checkbox
              v-model="checkedCards"
              :label="item.id"
              @change="toggleCard"
            >
              <div class="title-text">
                <!-- <img
                  :src="getStatusIcon(item.approveType)"
                  alt=""
                > -->
                <icon-font
                  :name="getStatusIcon(item.approveType)"
                  size="14"
                />
                <span style="margin-left:4px;">{{ getStatusText(item.approveType) }}</span>
              </div>
            </el-checkbox>
            <icon-font
              name="icon-right"
              color="var(--desktop-text-color-2)"
              size="14"
            />
          </div>
          <div class="card-content">
            <div class="content-item">
              <span class="gray">交易类型：</span>
              <span>{{ item.transactionType }}</span>
            </div>
            <div class="content-item">
              <span class="gray">交易金额：</span>
              <span>{{ item.transactionAmount }}</span>
            </div>
            <div class="content-item">
              <span class="gray">交易流水号：</span>
              <span>{{ item.flowNo }}</span>
            </div>
            <div class="content-item">
              <span class="gray">截至时间：</span>
              <span>{{ item.endTime }}</span>
            </div>
          </div>
          <el-button
            class="gotoDeal"
            type="primary"
          >去处理</el-button>
        </div>
      </el-checkbox-group>
    </div>
    <div class="select-all">
      <el-checkbox
        v-model="checkAll"
        :indeterminate="isIndeterminate"
        @change="checkAllChange"
      >
        全选
      </el-checkbox>
    </div>
  </div>
</template>

<script>
import PageHeader from '../components/PageHeader.vue';
import { themeChangeMixin } from '@/mixins/themeChangeMixin';
import mockData from './mockData';
export default {
  components: {
    PageHeader,
  },
  mixins: [themeChangeMixin],
  data() {
    return {
      labels: ['待办消息', '系统通知'], // tab标签
      handleValue: '待办消息',
      checkAll: false,
      isIndeterminate: false,
      checkedCards: [],
      processData: [],
    };
  },
  created() {
    this.processData = mockData;
    console.log('我是processData', this.processData);
  },
  methods: {
    getShowData() {

    },
    handleRefresh() {

    },
    getMoreInfo() {

    },
    handleCheckedCards(value) {
      const checkedCount = value.length;
      this.checkAll = checkedCount === this.processData.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.processData.length;
    },
    checkAllChange(val) {
      const arr = [];
      for (const i in this.processData) {
        arr.push(this.processData[i].id);
      }
      this.checkedCards = val ? arr : [];
      this.isIndeterminate = false;
    },
    toggleCard(val) {
      console.log('我是改变的val', val);
    },
    getStatusIcon(val) {
      if (val === '-1') {
        return 'icon-yituihui';
      } else if (val === '0') {
        return 'icon-yijujue';
      } else if (val === '2') {
        return 'icon-daishenpi';
      } else if (val === '1') {
        return 'icon-yitongguo';
      }
    },
    getStatusText(val) {
      if (val === '-1') {
        return '交易审批退回提醒';
      } else if (val === '0') {
        return '交易审批拒绝提醒';
      } else if (val === '2') {
        return '交易审批待处理提醒';
      } else if (val === '1') {
        return '交易审批通过提醒';
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.card{
  width: 100%;
  height: 100%;
  padding: 12px;
  overflow:hidden;
  position:relative;
    .select-all{
      width: 100%;
      padding:0 12px;
      height: 34px;
      background-color: var(--desktop-bg-color-1);
      border-top: solid 1px var(--desktop-border-color-1);
      position: absolute;
      bottom:2px;
      display: flex;
      align-items: center;
    }
  .split-line{
    margin:auto 11px auto 11px;
    width: 1px;
    background: var(--desktop-border-color-1);
    height: 12px;
  }
  .title{
    padding-bottom:10px;
    border-bottom: solid 1px var(--desktop-border-color-1);
  }
  .content{
    height: calc(100% - 25px);
    overflow-y:scroll;
    position:relative;
    padding:8px 0;
    transform: translate(0);
    .item-card{
      width:100%;
      height: 150px;
      padding:12px;
      position:relative;
      .card-title{
        width: 100%;
        min-height: 20px;
        display:flex;
        align-items: center;
        justify-content: space-between;
        img{
          width: 14px;
          height: 14px;
        }
        .title-text{
          display:flex;
          align-items: center;
          font-size: 12px;
        }
      }
      .card-content{
        width: 100%;
        height: calc(100% - 20px);
        .content-item{
          width: 100%;
          min-height: 24px;
          font-size:12px;
          display:flex;
          align-items: center;
          span:last-child{
            margin-left:16px;
          }
        }
      }
      .gotoDeal{
        display: none;
        position:absolute;
        bottom: 12px;
        width: 90%;
      }
    }
    .black{
      .item-card:hover{
        background-image: url('../../assets/dark/dark_bg_card_hover.png');
        background-repeat: no-repeat; /* 防止平铺 */
        background-position: center;   /* 居中显示 */
        background-size: cover;       /* 覆盖整个区域 */
      }
    }
    .default{
      .item-card:hover{
        background-image: url('../../assets/default/default_bg_card_hover.png');
        background-repeat: no-repeat; /* 防止平铺 */
        background-position: center;   /* 居中显示 */
        background-size: cover;       /* 覆盖整个区域 */
      }
    }
    .item-card:hover .gotoDeal{
      display:block;
    }
  }
}
.icon-bg{
  width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--bg-color-17);
}
.gray{
  color:var(--desktop-text-color-2);
}
::v-deep.el-checkbox{
  color:var(--table-text-color);
  display:flex;
  align-items: center;
}
::v-deep .el-checkbox>.el-checkbox__input{
  margin-bottom:-1px;
}
// 自定义按钮组样式
::v-deep .el-radio-button__inner{
  background-color: var(--desktop-bg-color-5);
  color:var(--color-90);
}
::v-deep .el-radio-button:first-child .el-radio-button__inner{
  border-left:none;
}
::v-deep .black .el-radio-button__orig-radio:checked+.el-radio-button__inner{
  background:url('../../assets/dark/dark_bg_button_selected.png');
  background-repeat: no-repeat; /* 防止平铺 */
  background-position: center;   /* 居中显示 */
  background-size:cover;
  border: none;
  box-shadow: none;
}
::v-deep .default .el-radio-button__orig-radio:checked+.el-radio-button__inner{
  background-color:#3389FF;
  color: #ffffff;
  background-repeat: no-repeat; /* 防止平铺 */
  background-position: center;   /* 居中显示 */
  background-size:cover;
  border: none;
  box-shadow: none;
}
::v-deep .el-radio-button__orig-radio+.el-radio-button__inner{
  border: none;
  box-shadow: none;
}
::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner{
  color:#ffffff;//被选中黑白模式都是这个颜色
}
</style>
