<template>
  <div>
    <div v-if="noticeList.length>0" style="display: flex;">
      <transition class="" name="slide" mode="out-in">
        <div style="display: flex;margin:0 auto;cursor: pointer;" @click="notice(count)">
          <img src="@/assets/profile/horn.png" alt style="width: 26px;height: 26px;margin-left: 11px;">
          <!-- <span style="font-size: 16px;font-weight: bold;color: #333333;line-height: 26px;">系统公告：</span> -->
          <span style="font-size: 16px;font-weight: bold;color: #333333;line-height: 26px;">{{ text?text[apiLang]:'' }}</span>
        </div>
      </transition>
    </div>
    <el-carousel height="450px">
      <el-carousel-item v-for="item in bannerUrlList" :key="item.id">
        <img :src="item.bannerUrlWeb" alt style="width: 1120px;height: 450px;margin-top: 24px;object-fit:fill" @click="banner(item.id)">
      </el-carousel-item>
    </el-carousel>
    <!-- 搜索工作栏 -->
    <el-form v-show="showSearch" ref="queryForm" :model="queryParams" size="small" :inline="true" style="margin-top: 20px;">
      <el-form-item :label="$t('controlorder.No')" prop="searchKey">
        <el-input v-model="queryParams.searchKey" style="width: 230px;" :placeholder="$t('controlorder.NoRules')"
                  clearable/>
      </el-form-item>
      <el-form-item :label="$t('postorder.status')" prop="dynamicStatusList">
        <dict-selector v-model="dynamicStatusList" :type="DICT_TYPE.APP_ORDER_STATUS" style="width: 150px; margin-right: 5px" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">{{ $t('common.search') }}</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">{{ $t('common.reload') }}</el-button>
      </el-form-item>
    </el-form>
    <div v-if="sendOrderList.length>0">
      <div style="display: flex;margin-top: 28px;">
        <img src="@/assets/profile/order3.png" alt style="width: 28px;height: 28px;margin-left: 2px;">
        <span style="font-size: 22px;font-weight: bold;color: #333333;line-height: 28px;margin-left:9px">{{ $t('profile.myPost') }}</span>
      </div>
      <div style="margin-top: 16px;">
        <el-table
          :data="sendOrderList"
          style="width: 100%"
        >
          <el-table-column
            type="index"
            width="50"
            align="center"
            header-align="center"
          />
          <el-table-column
            :label="$t('profile.orderNo')"
            width="120"
            align="center"
            header-align="center"
          >
            <template slot-scope="scope">
              <router-link :to="{path: '/jiedao/jd-orderdetail',query: {orderId: scope.row.orderId}}" class="link-type">
                <span>{{ scope.row.orderNo }}</span>
              </router-link>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('profile.transport')"
            width="150"
            align="center"
            header-align="center"
          >
            <template slot-scope="{row}">
              <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="row.transportId" />
            </template>
          </el-table-column>
          <el-table-column
            prop="marks"
            :label="$t('profile.marks')"
            width="100"
            align="center"
            header-align="center"
          />
          <el-table-column
            :label="$t('profile.status')"
            align="center"
            header-align="center"
          >
            <template slot-scope="scope">
              {{ getStatusName(scope.row) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            :label="$t('profile.createTime')"
            align="center"
            header-align="center"
          />
        </el-table>
      </div>
      <jd-button style="margin:16px auto;width: 200px;" :name="$t('profile.viewMorePost')" @click.native="postorder" />
    </div>
    <div v-if="receivedOrderList.length>0">
      <div style="display: flex;margin-top: 28px;">
        <img src="@/assets/profile/order3.png" alt style="width: 28px;height: 28px;margin-left: 2px;">
        <span style="font-size: 22px;font-weight: bold;color: #333333;line-height: 28px;margin-left:9px">{{ $t('profile.myReceivedo') }}</span>
      </div>
      <div style="margin-top: 16px;">
        <el-table
          :data="receivedOrderList"
          style="width: 100%"
        >
          <el-table-column
            type="index"
            width="50"
            align="center"
            header-align="center"
          />
          <el-table-column
            :label="$t('profile.orderNo')"
            width="120"
            align="center"
            header-align="center"
          >
            <template slot-scope="scope">
              <router-link :to="{path: '/jiedao/jd-orderdetail',query: {orderId: scope.row.orderId}}" class="link-type">
                <span>{{ scope.row.orderNo }}</span>
              </router-link>
            </template>
          </el-table-column>
          <el-table-column
            prop="transportId"
            :label="$t('profile.transport')"
            width="150"
            align="center"
            header-align="center"
          >
            <template slot-scope="{row}">
              <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="row.transportId" />
            </template>
          </el-table-column>
          <el-table-column
            prop="marks"
            :label="$t('profile.marks')"
            width="100"
            align="center"
            header-align="center"
          />
          <el-table-column
            :label="$t('profile.status')"
            prop="statusMsg"
            align="center"
            header-align="center"
          >
            <!-- <template slot-scope="scope">
              <dict-tag :type="DICT_TYPE.ORDER_STATUS" :value="scope.row.status" />
            </template> -->
          </el-table-column>
          <el-table-column
            prop="createTime"
            :label="$t('profile.createTime')"
            align="center"
            header-align="center"
          />
        </el-table>
      </div>
      <jd-button style="margin:16px auto;width: 200px;" :name="$t('profile.viewMoreReceivedo')" @click.native="receivedorder" />
    </div>
    <div v-if="sendOrderList.length==0&&receivedOrderList.length==0" style="text-align: center;">
      <img src="@/assets/profile/none.png" alt style="width: 240px;height: 240px;">
    </div>
    <div v-if="sendOrderList.length==0&&receivedOrderList.length==0" style="text-align: center;">
      <span>{{ $t('profile.notOrder') }}</span>
    </div>
    <!-- 广告弹窗 -->
    <jd-dialog :show="bannerVisible&&bannerList.length>0" :button="$t('profile.know')" @showDialog="showDialog">
      <div>
        <div style="font-size: 24px;font-weight: bold;color: #333;text-align: center;">{{ dialogData['title'+bannerLang] }}</div>
        <div style="margin: 20px 50px;height: 150px;overflow: auto;" v-html="dialogData['htmlWeb'+bannerLang]">{{ dialogData['htmlWeb'+bannerLang] }}</div>
      </div>
    </jd-dialog>
    <!-- 密码修改提示弹窗 -->
    <el-dialog :title="$t('提示')" :visible.sync="noticeVisble" width="30%" top="30vh" center append-to-body :close-on-click-modal="false">
      <el-card>
        {{ $t('您的密码过于简单，请前往修改密码') }}
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="noticeVisble=false;$router.push('/jiedao/jd-setting');">{{ $t('修改密码') }}</el-button>
        <el-button @click="noticeVisble=false;bannerVisible=true">{{ $t('知道了') }}</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="this.levelTitle" :visible.sync="levelVisble" width="30%" top="30vh" center append-to-body :close-on-click-modal="false">

      <el-card v-html="levelLeviteInfo">
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button @click="levelVisble=false;">{{ $t('知道了') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import JdButton from '@/components/JdButton'
import JdDialog from '@/components/JdDialog'
import DictTag from '@/components/DictTag'
import { getBannerList, getBannerUrlList, getNoticeList } from '@/api/message'
import { getNeedKnow,getLevelDetails } from '@/api/data'
import { getIssued, getReceived } from '@/api/order'
import { getDialog, setDialog } from '@/utils/auth'
import { mapGetters } from 'vuex'
import {DICT_TYPE} from "@/utils/dict";
import { parseTime } from '@/utils'
import DictSelector from "@/components/DictSelector/index.vue";
export default {
  name: 'Profile',
  components: {
    JdButton,
    JdDialog,
    DictTag,
    DictSelector
  },
  data() {
    return {
      // 显示搜索条件
      showSearch: true,
      // 查询参数
      queryParams: {
        page: 1,
        rows: 10
      },
      dynamicStatusList: '', // 状态筛选类别
      bannerVisible: false,
      noticeVisble: false,
      levelVisble: false,
      bannerList: [],
      noticeList: [],
      membershipLevels: [],
      levelLeviteInfo:'',
      levelTitle:'',
      count: 0, // 当前索引
      urlCount: 0, // 当前索引
      intervalId: null, // 定时器ID
      playTime: 3000, // 定时器执行间隔
      dialogData: {},
      bannerUrlList: [],
      sendOrderList: [],
      receivedOrderList: [],
      condition: {
        page: 1,
        rows: 3,
        creator: null
      },
      apiLang: '',
      apiContentLang: '',
      apiLabelLang: '',
      bannerLang: '',
      langData: { zh_CN: 'titleZh', en_US: 'titleEn' },
      langContentData: { zh_CN: 'contentZh', en_US: 'contentEn' },
      langLabelData: { zh_CN: 'label', en_US: 'labelEn' },
      bannerData: { zh_CN: 'Zh', en_US: 'En' }
    }
  },
  computed: {
    ...mapGetters(['loginUser']),
    text() {
      return this.noticeList[this.count]
    },
    language: {
      get() {
        return this.$store.getters.language
      },
      set(val) {
        this.$i18n.locale = val
        this.$store.dispatch('app/setLanguage', val)
      }
    },
    isChinese() {
      return this.$i18n.locale === 'zh_CN'
    }
  },
  watch: {
    isChinese() {
      this.getList()
    },
    language() {
      this.apiLang = this.langData[this.language]
      this.apiContentLang = this.langContentData[this.language]
      this.apiLabelLang = this.langLabelData[this.language]
      this.bannerLang = this.langLabelData[this.language]
    }
  },
  created() {
    this.apiLang = this.langData[this.language]
    this.apiContentLang = this.langContentData[this.language]
    this.apiLabelLang = this.langLabelData[this.language]
    this.bannerLang = this.bannerData[this.language]
    // this.condition.creator = this.loginUser.id
    this.noticeVisble = this.loginUser.isSimplePassword && !getDialog()
    getBannerList({ page: 1, rows: 10 }).then(r => {
      this.bannerList = r.data.list
      var show = getDialog()
      if (this.bannerList.length > 0 && !show) {
        this.dialogData = this.bannerList[0]
        if (!this.noticeVisble) {
          this.bannerVisible = true
        }
      }
    })
    this.getUpdateOpenAd(this.loginUser)
    getBannerUrlList({ page: 1, rows: 10 }).then(r => {
      this.bannerUrlList = r.data.list
    })
    getNoticeList({ page: 1, rows: 100 }).then(r => {
      this.noticeList = r.data.list
    })
    this.getList()
    getReceived(this.condition).then((r) => {
      this.receivedOrderList = r.data.list
    })
    this.intervalId = setInterval(() => { // 定义定时器
      this.getText()
    }, this.playTime)
  },
  destroyed() {
    clearInterval(this.intervalId) // 清除定时器
  },
  methods: {
    getStatusName: function (item) {
      const orderStatus = this.getRealStatus(item);
      const special = this.getDictDatas(this.DICT_TYPE.APP_ORDER_STATUS);
      const statusMsg=special.filter(e => {
        return e.value.split(',').map(Number).includes(orderStatus)
      });
      return this.isChinese ? statusMsg[0].label : statusMsg[0].labelEn;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dynamicStatusList = ''
      this.queryParams = {
        page: 1,
        rows: 10
      }
      this.handleQuery()
    },
    getList() {
      if (this.dynamicStatusList){
        this.queryParams.dynamicStatusList=this.dynamicStatusList
      }
      getIssued(this.queryParams).then((r) => {
        this.sendOrderList = r.data.list.slice(0, 3)
      })
    },
    getUpdateOpenAd: function (data) {
      //获取存储的会员等级信息
      // const levelRule = this.levelRule;
      const levelRule = JSON.parse(window.localStorage.getItem("levelRule"));
      const user=data;
      const params = {
        memberId: data.id,
        pageNo: 1,
        pageSize: 10
      }
      let levelRule1 = '';
      const that = this;
      getLevelDetails(params).then((res) => {
        levelRule1 = res.data.list[0];
        if (levelRule1!=null){
          //升级展示 获取升级提示
          getNeedKnow({key:'levelUpdate'}).then(res => {
            debugger
            if(res.code == 0 && res.data){
              levelRule1.username=user.nickname;
              debugger
              console.log()
              const level = this.getDictDatas(DICT_TYPE.MEMBERSHIP_LEVELS).filter(item => levelRule1.level.toString() === item.value)[0]
              if (level) {
                levelRule1.levelName = level[this.apiLabelLang];
              }
              levelRule1.validityPeriod=parseTime(levelRule1.validityPeriod,'{y}-{m}-{d}')
              this.levelTitle=res.data[this.apiLang]
              this.levelLeviteInfo=this.replaceContent(res.data[this.apiContentLang],levelRule1);
              if (!levelRule){
                //提示升级
                this.levelVisble=true;
              }else if ((levelRule1.level>levelRule.level)||(levelRule1.level==levelRule.level&&levelRule1.sort>levelRule.sort)){
                //提示升级
                this.levelVisble=true;
              }
            }

          })
          window.localStorage.setItem("levelRule", JSON.stringify(levelRule1))
        }
      })
    },
    replaceContent(content,levelRule){
      return content.replace(/{(\w+)}/g, function(match, key) {
        return levelRule[key] !== undefined ? levelRule[key] : match;
      });
    },
    notice(val) {
      var id = this.noticeList[val].id
      this.$router.push('/jiedao/jd-notice/jd-noticedetail?id=' + id)
    },
    banner(id) {
      this.$router.push('/jiedao/jd-bannerdetail?id=' + id)
    },
    getText() {
      const len = this.noticeList.length // 获取数组长度
      if (len === 0) {
        return // 当数组为空时，直接返回
      }
      if (this.count === len - 1) { // 当前为最后一个时
        this.count = 0 // 从第一个开始
      } else {
        this.count++ // 自增
      }
    },
    receivedorder() {
      this.$router.push('/jiedao/jd-receivedorder')
    },
    postorder() {
      this.$router.push('/jiedao/jd-postorder')
    },
    showDialog() {
      this.bannerVisible = false
      setDialog()
    },
    getRealStatus(item){
      let status = 0;
      if (item.status === 12 && item.shipmentState === 325){
        status = 12325
      }else if (item.status === 5 && item.airShipment === 1 && item.abnormalState === 0 && item.auditType=== 0 && item.transportId === 3){
        status = 10501
      }else if (item.status === 5 && (item.airShipment === 2 || item.airShipment === 3) && item.abnormalState === 0 && item.auditType=== 0 && item.transportId === 3){
        status = 10502
      }else if (item.status === 5 && item.airShipment === 4 && item.transportId === 3) {
        status = 10503;
      } else if (item.status === 5 && item.abnormalState === 0 && item.auditType === 0 &&
        ((item.transportId === 3 && (item.airShipment === 2 || item.airShipment === 3 || item.airShipment === 4)) ||
          (item.transportId === 1 && (item.airShipment === 0 || item.airShipment === 2 || item.airShipment === 3 || item.airShipment === 4)))) {
        status = 10504;
      } else if (item.status === 32 && item.shipmentState === 411 && item.transportId === 3) {
        status = 132411;
      } else if (item.status === 32 && item.shipmentState === 412 && item.transportId === 3) {
        status = 132412;
      } else if (item.status === 32 && item.shipmentState === 409 && item.transportId === 3) {
        status = 132409;
      } else if (item.status === 32 && item.shipmentState === 428 && item.transportId === 3) {
        status = 118428;
      }else {
        status = item.status;
      }
      return status
    }
  }
}
</script>

<style scoped>
::v-deep .el-table__header .el-table__cell{
  background-color: #27417C;
  font-size: 13px;
  height: 48px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: #FFFFFF;
}
</style>
