<template>
  <div class="div_page_bg">
    <div :class="pageContentClass">
      <div style="display: flex">
        <span class="span_h1">基本信息</span>
      </div>
      <div class="item-info">
        <div class="div_line" v-for="(data,index) in baseInfo">
          <span class="span_line_title text_light">{{data.name}}</span>
          <span class="text_color">{{data.value}}</span>
        </div>
      </div>
      <div style="display: flex;margin-top: 15px">
        <span class="span_h1">施工内容</span>
      </div>
      <div class="div_background item-info" style="margin: 10px 5px 0 5px">
        <span>{{infoDetail.constructionContent}}</span>
      </div>

      <div style="display: flex;margin-top: 15px">
        <span class="span_h1">备注内容</span>
      </div>
      <div class="div_background item-info" style="margin: 10px 5px 0 5px">
        <span>{{infoDetail.additionalContent}}</span>
      </div>

      <div style="display: flex;margin-top: 15px">
        <span class="span_h1">巡检计划</span>
      </div>
      <van-list class="item-info">
        <div  style="margin-top: 10px;margin-bottom: 10px" v-for="(data,index) in infoDetail.modelList" :key="data.id">
          <div class="div_line">
            <span class="span_line_title text_light">模板名称</span>
            <span class="text_color">{{data.name}}</span>
          </div>
          <div class="div_line">
            <span class="span_line_title text_light">计划名称</span>
            <span class="text_color">{{data.planName}}</span>
          </div>
          <div class="div_line">
            <span class="span_line_title text_light">巡检起止日期</span>
            <span
              class="text_color">{{data.inspectionDateStart.substr(0,10)}} 至 {{data.inspectionDateEnd.substr(0,10)}}</span>
          </div>
          <div class="div_line">
            <span class="span_line_title text_light">巡检人员</span>
            <span class="text_color">{{data.inspectionPersonName}}</span>
          </div>

        </div>
      </van-list>

      <div style="display: flex;margin-top: 15px">
        <span class="span_h1">附件</span>
      </div>
      <van-list>
        <div v-for="(item,index) in infoDetail.attachementIn" :key="item.fid">
          <div class="div_background" style="display:flex;align-items: center; margin: 10px 5px 0 5px" @click="onClickFile(item)">
<!--            <img src="../../../assets/images/icon_provider_info_bj.png" width="20px" height="30px">-->
            <span class="text_light" style="margin-left: 10px">{{item.fullName}}</span>
          </div>
        </div>

      </van-list>
    </div>
    <div class="common_flex">
      <button v-for="(btn,index) in showBtns" :key="index" class="action_btn" @click="onClickItem(btn)">
        {{btn.name}}
      </button>
      <button v-if="moreBtnShow" class="action_btn" @click="showMore = true">更多</button>
    </div>
    <van-action-sheet :round="false" v-model="showMore" :actions="moreBtns" close-on-click-action cancel-text="取消" @select="onSelect" get-container="body" @cancel="onCancel" />

  </div>
</template>

<script>
  import {addDecorationModifyCheckRecord, selectDecoration} from "../../../service/getData";

  export default {
    name: "breakRulesInfoDetail",
    data() {
      return {
        decorationId: '',
        operate: [],
        baseInfo: [],
        inspectPlan: [],
        infoDetail: '',
        showBtns: [],
        moreBtnShow: false,
        examineState:'',
        decorationState:'',
        decorationBreakRuleNum:0,
        moreBtns:[],
        showMore:false,
        pageContentClass:'div_page_content_no_operate'
      }
    },
    created() {
      this.decorationId = this.$route.query.decorationId;

      this.selectDecorationJS();

    },
    methods: {
      initButtons(){
        if (this.operate.length > 3) {
          this.moreBtnShow = true;
          for (let i = 0; i < 2; i++) {
            this.showBtns.push(this.operate[i]);
          }
          for (let i = 2; i < this.operate.length; i++) {
            this.moreBtns.push(this.operate[i]);
          }
        } else {
          this.showBtns = this.operate;
        }
      },
      selectDecorationJS() {
        let that = this;
        this.$toast.loading({
          message: '加载中...',
          duration: 0,
          forbidClick: true
        });
        selectDecoration([this.decorationId]).then(res => {
          that.$toast.clear()
          if (res.status == 200) {
            that.generateDetail(res.data)
            that.infoDetail = res.data;
            that.decorationState = res.data.decorationState;
            that.decorationBreakRuleNum = res.data.decorationBreakRuleNum;
            that.examineState = res.data.examineState;
            that.generateDatas();
          }
        }).catch(err => {
          that.$toast.clear();
        })
      },
      generateDetail(data) {
        this.baseInfo = [
          {
            name: '项目名称',
            value: data.projectName,
          },
          {
            name: '装修房间',
            value: data.roomName,
          },
          {
            name: '请求人',
            value: data.ownerName,
          },
          {
            name: '联系电话',
            value: data.telephone,
          },
          {
            name: '装修地址',
            value: data.address,
          },
          {
            name: '装修日期',
            value: data.decorationDate,
          },
          {
            name: '装修公司',
            value: data.decorationCompanyName,
          },
          {
            name: '装修负责人',
            value: data.decorationLeader,
          },
          {
            name: '联系电话',
            value: data.leaderTelephone,
          },

        ]
      },
      generateDatas(){
        switch (this.examineState+'') {
          case "0":
            this.operate=[
              {
                name:'驳回',
                color:'#C42823'
              },
              {
                name:'通过',
                color:'#5B96F9'
              },
            ]
            this.pageContentClass = 'div_page_content'
            break;
          case "1":
            this.operate = [];
            if (this.decorationBreakRuleNum == 0) {
              this.operate.push(
                {
                  name: '新增违规',
                  color: '#E89433'
                },
              )
            } else {
              this.operate.push(
                {
                  name: '违规列表',
                  color: '#E89433'
                },
              )
              this.operate.push(
                {
                  name: '整改复查',
                  color: '#E89433'
                },
              )
            }
            if (this.decorationState == 1 || this.decorationState == 2) {
              this.operate.push(
                {
                  name: '初验',
                  color: '#5B96F9'
                },
              )
              this.operate.push(
                {
                  name: '复验',
                  color: '#5B96F9'
                },
              )
            } else
            if (this.decorationState == 3) {
              this.operate.push(
                {
                  name: '复验',
                  color: '#5B96F9'
                },
              )
            }
            this.pageContentClass = 'div_page_content'
            break;
          case "2":

            break;

        }
        this.initButtons()
      },

      onClickItem(data) {
        switch (data.name) {
          case "驳回":
            this.$router.push({
              path: 'decorateOperate',
              query: {
                type: 0,
                decorationId: this.infoDetail.decorationId
              }
            })
            break;
          case "通过":
            this.$router.push({
              path: 'decorateOperate',
              query: {
                type: 1,
                decorationId: this.infoDetail.decorationId
              }
            })
            break;
          case "新增违规":
            this.$router.push({
              path: 'decorateOperate',
              query: {
                type: 2,
                decorationId: this.infoDetail.decorationId
              }
            })
            break;
          case "违规列表":
            this.$router.push({
              path: 'breakRulesList',
              query: {
                decorationId: this.infoDetail.decorationId
              }
            })
            break;
          case "整改复查":
            this.$router.push({
              path: 'breakRulesListCheck',
              query: {
                decorationId: this.infoDetail.decorationId
              }
            })
            break;
          case "初验":
            this.$router.push({
              path: 'decorateOperate',

              query: {
                type: 3,
                decorationId: this.infoDetail.decorationId
              }
            })
            break;
          case "复验":
            this.$router.push({
              path: 'decorateOperate',
              query: {
                type: 4,
                decorationId: this.infoDetail.decorationId
              }
            })
            break;


        }
      },
      onClickFile(item){
        console.log(item)
        let that = this;
        try {
          this.$toast.loading({
            message: '加载中...',
            duration: 0,
            forbidClick: true
          });
          EbeiPlugins.downloadFile(
            item.resPath,
            item.fid,
            item.fullName,
            (res) =>{
              that.$toast.clear();
              EbeiPlugins.previewFile(item.fid)
            },
            (err) =>{
              that.$toast.clear();
              that.$toast({
                message: err,
                position: 'bottom'
              })
            }
          );
        } catch (e) {

        }
      },
      onSelect(item){
        this.onClickItem(item);
      },
      onCancel(item){
        this.showMore = false;
      }

    }
  }
</script>

<style scoped lang="less">
  ::-webkit-scrollbar {
    display: none;
  }

  .item-info {
    font-size: 14px;
    color:#666;
  }

  .div_page_bg {
    width: 100%;
    height: 100%;
    background-color: white;
  }

  .div_page_content_no_operate {
    width: 100%;
    padding: 15px;
    height: 100%;
    overflow-y: auto;
  }
  .div_page_content {
    width: 100%;
    padding: 15px;
    height: calc(~'100vh - 44px');
    overflow-y: auto;
  }

  .span_h1 {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    color: black;

  }

  .span_h1::before {
    content: ' ';
    height: 12px;
    width: 3px;
    margin-right: 5px;
    background-color: #5B96F9;
  }

  .div_line {
    display: flex;
    margin-top: 5px;
    margin-left: 5px;
  }

  .div_line span:last-child{
    display:flex;
    margin-left:10px;
    width:75%;
  }

  .span_line_title {
    width: 25%;
    word-break:keep-all;
  }

  .div_background {
    background-color: rgba(247, 249, 254, 1);
    padding: 10px;
  }

  .div_operate {
    display: flex;
  }

  .common_flex {
    display: flex;
    height: 44px;
    flex-direction: row;
    align-items: center;

    .action_btn {
      flex: 1;
      height: 44px;
      line-height: 44px;
      font-size: 16px;
      text-align: center;
      border: none;

      &:nth-child(1) {
        background: #2761FF;
        color: #fff;
      }

      &:nth-child(2) {
        background: #4CA8FF;
        color: #fff;
      }

      &:nth-child(3) {
        background: #fff;
        color: #666666;
      }
    }
  }
</style>
