<template>
  <div class="publish-container">
    <div>
      <div v-if="!publishStatus"
           class="publish-btn-view">
        <div>
          <el-form label-width="150px">
            <el-form-item label="小程序端">
              <el-radio-group class="form_item"
                              @change="clientChange"
                              v-model="clientType">
                <el-radio label="resi">居民端</el-radio>
                <el-radio label="gov">工作端</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="发布范围">
              <el-tree class="form_item"
                       ref="tree"
                       style="background-color:#f7f7f7"
                       :props="props"
                       :data="data"
                       show-checkbox
                       :default-expand-all="false" />
            </el-form-item>
          </el-form>
        </div>
        <div style="text-align:left;margin-left:200px;margin-top:50px">
          <el-button class="publish-btn"
                     size="medium"
                     type="primary"
                     @click="publishProject">
            <i class="el-icon-document-checked el-icon--right">发布</i>
          </el-button>
          <!-- <el-button class="publish-btn"
                     size="medium"
                     type="primary"
                     @click="resolveAgency">
            <i class="el-icon-document-checked el-icon--right">获取组织</i>
          </el-button> -->
        </div>
      </div>
      <div v-if="publishStatus"
           class="publish-finish-view">
        <el-row :gutter="10"
                align="middle"
                type="flex">
          <!-- <el-col>
            <div>
              <vue-qr v-if="writeLink"
                      :callback="qrCodeGenSuccess"
                      :size="194"
                      :text="writeLink" />
            </div>
            <div style="text-align: center;">
              <el-link type="primary" @click="()=>{
                                this.downloadFile('qrcode.png',this.qrCodeUrl)
                            }"
                            >
                                下载分享二维码
                            </el-link>
            </div>
          </el-col> -->
          <el-col style="margin-left: 75px;">
            <div style="display: flex; justify-content: center;">
              <div class="icon-view">
                <i class="el-icon-check success-icon" />
              </div>
            </div>
            <div>
              <p class="success-title">恭喜您，发布成功！</p>
            </div>
            <div>
              <p class="link-text"> {{ writeLink }}</p>
            </div>
            <el-row>
              <el-col :offset="2"
                      :span="6">
                <!-- <el-button v-clipboard:copy="writeLink"
                           v-clipboard:error="()=>{this.msgError('复制失败')}"
                           v-clipboard:success="()=>{this.msgSuccess('复制成功')}"
                           type="primary">
                  复制链接
                </el-button> -->
              </el-col>
              <el-col :span="24">
                <el-button type="danger"
                           @click="stopPublishProject">
                  停止发布
                </el-button>
              </el-col>
              <!-- <el-col :span="12">
                <el-button type="warning"
                           @click="toFeedbackPageHandle">
                  查看反馈
                </el-button>
              </el-col> -->
            </el-row>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
// import VueQr from 'vue-qr'

export default {
  name: 'ProjectPublish',
  components: {
    // VueQr
  },
  data () {
    return {
      publishStatus: false,
      projectKey: null,
      writeLink: '',
      qrCodeUrl: '',

      clientType: 'resi',

      props: {
        label: 'orgName',
        children: 'subOrgList'
      },
      count: 1,
      data: [],

      selAgencyList: [],
      agencyArrayCopy: []
    }
  },
  mounted () {
    this.projectKey = this.$route.query.key
    let url = window.location.protocol + '//' + window.location.host
    this.writeLink = `${url}/${process.env.VUE_APP_PUBLIC_PATH}/s/${this.projectKey}`
    this.getProjectStatus()
  },
  methods: {

    clientChange (label) {
      this.clientType = label
      this.loadAgencyList()
    },

    loadAgencyList () {
      const customerId = localStorage.getItem('customerId')
      let params = {
        client: this.clientType,
        agencyId: customerId
      }
      this.$api.post(`/data/aggregator/org/agencytree`, params).then((res) => {
        this.data = res.data || []
      })
    },

    //解析树选择的数据
    resolveAgency () {
      let selAll = this.$refs.tree.getCheckedNodes(false, false)
      // console.log(selAll)

      this.selAgencyList = []
      this.agencyArrayCopy = JSON.parse(JSON.stringify(this.data))

      selAll.forEach(element => {
        // debugger
        let orgId = element.orgId
        this.resursionTree(this.agencyArrayCopy, orgId)
      });

      console.log(this.selAgencyList)
    },

    //递归树
    resursionTree (orgArray, orgId) {
      for (let i = 0; i < orgArray.length; i++) {
        let item = orgArray[i]
        // debugger
        if (item && item.orgId === orgId) {
          // debugger
          this.selAgencyList.push(orgArray[i])
          orgArray[i] = {}
          break

        } else if (item.subOrgList && item.subOrgList.length > 0) {
          // debugger
          this.resursionTree(item.subOrgList, orgId)

        }
      }
      // console.log(this.agencyArrayCopy)


    },

    getProjectStatus () {
      this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/${this.projectKey}`).then(res => {
        if (res.data.status == 2) {
          this.publishStatus = true
        } else {
          this.publishStatus = false
          this.loadAgencyList()
        }
      })
    },
    publishProject () {
      this.resolveAgency()
      if (this.data.length > 0 && this.selAgencyList.length === 0) {
        this.$message(
          {
            message: "请选择发布范围",
            type: 'warning'
          }
        )
        return false
      }

      const params = {
        key: this.projectKey,
        client: this.clientType,
        rangeList: this.selAgencyList
      }

      this.$api.post(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/publish`,
        params).then(() => {
          this.publishStatus = true
          this.$parent.getProjectStatus()
          this.msgSuccess('发布成功')
        })
    },
    stopPublishProject () {

      this.$api.post(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/stop`, { 'key': this.projectKey }).then(res => {
        if (res.data) {
          this.msgSuccess('停止成功')
          this.$parent.getProjectStatus()
          this.getProjectStatus()
        }
      })
    },
    qrCodeGenSuccess (dataUrl) {
      this.qrCodeUrl = dataUrl
    },
    downloadFile (fileName, content) {
      let aLink = document.createElement('a')
      let blob = this.base64ToBlob(content) // new Blob([content]);
      let evt = document.createEvent('HTMLEvents')
      evt.initEvent('click', true, true)// initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
      aLink.download = fileName
      aLink.href = URL.createObjectURL(blob)
      // aLink.dispatchEvent(evt);
      aLink.click()
    },
    // base64转blob
    base64ToBlob (code) {
      let parts = code.split(';base64,')
      let contentType = parts[0].split(':')[1]
      let raw = window.atob(parts[1])
      let rawLength = raw.length
      let uInt8Array = new Uint8Array(rawLength)
      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i)
      }
      return new Blob([uInt8Array], { type: contentType })
    },
    toFeedbackPageHandle () {
      this.$router.replace({ path: '/project/form/statistics', query: { key: this.projectKey } })
    }
  }

}
</script>

<style lang="scss" scoped>
.publish-container {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background-color: #f7f7f7;
  min-height: 84vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.publish-btn-view {
  width: 800px;
}
.publish-finish-view {
  width: 500px;
  height: 200px;
  text-align: center;
  .icon-view {
    width: 59px;
    height: 59px;
    border-radius: 100px;
    background-color: #0076ff;
    display: flex;
    align-items: center;
    align-content: center;
    justify-items: center;
    justify-content: center;
  }
  .success-icon {
    text-align: center;
    color: white;
    font-size: 30px;
  }
  .success-title {
    color: rgba(16, 16, 16, 100);
    font-size: 28px;
  }
  .link-text {
    color: rgba(16, 16, 16, 100);
    font-size: 14px;
  }
}
.form_item {
  padding-left: 20px;
}
</style>
